dotansimha / dotansimha/graphql-code-generator

Field use detection broken for common Vue scenarios: reactivity and templates

Open
#10,127 0 comments 0 reactions 0 assignees View on GitHub
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"

Screenshot 2024-09-02 at 10 59 10

## 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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.