dotansimha / dotansimha/graphql-code-generator
Field use detection broken for common Vue scenarios: reactivity and templates
- Dominant language
- TypeScript
- Stars
- 11.3k
- Forks
- 1.4k
- Avg merge
- 1d 1h
- Merged PRs (30d)
- 23
Description
### Which packages are impacted by your issue?
@graphql-codegen/client-preset
### Describe the bug
My Vue components all incorrectly show warning about fields, saying "Field ... is not used." -- even though I use them.
After some experimentation, I found that I can make the warning go away... when I drop reactivity.
Specifically, this has no warning:
```
import { gql, useFragment, type FragmentType } from "~typedgql"
const conversationFragment = gql(/* GraphQL */ `
fragment ConversationHeader_ConversationFragment on Conversation {
subject
}
`)
const props = defineProps<{
conversation: FragmentType<typeof conversationFragment>
}>()
const conversation = useFragment(conversationFragment, props.conversation)
const subject = conversation.subject
{{ subject }}
```
Typescript correctly knows that `subject` is used. But there are two very specific things here: (1) this isn't reactive, and (2) the subject is referenced in the script section, not in the template.
## Reactivity
To make the above code reactive, we need to wrap the useFragment in a computed call (see also https://github.com/dotansimha/graphql-code-generator/issues/9767), so that changes in props.conversation will run it through useFragment again, updating the conversation object. We need to do the same for conversation.subject, too, unless we use it in a template (though that would make for two problems, see below). So the following code is the correct reactive Vue way of managing these:
```
const conversation = computed(() => useFragment(conversationFragment, props.conversation))
const subject = computed(() => conversation.value.subject)
```
(and, as far as I can tell, this is also the officially recommended way, see again #9767, the only mention of this reactivity I've found)
However, when I do that, ts-plugin flags the fragment "Field subject is not used"
## Use in template
If I remove the `const subject = conversation.subject` line above, and just reference it in the template, `
{{ conversation.subject }}
`, ts-plugin flags `Field subject is not used`.### Your Example Website or App
Happy to provide if you can't trivially reproduce in any vue project
### Steps to Reproduce the Bug or Issue
Above
### Expected behavior
Above
### Screenshots or Videos
_No response_
### Platform
latest everything, let me know if it's relevant, happy to provide more detail
### Codegen Config File
_No response_
### Additional context
_No response_
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.