dotansimha / dotansimha/graphql-code-generator-community

[react-query] query keys for queries with no required variables are different with {} vs. no arguments

Open
#866 1 comment 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
137
Forks
195
Avg merge
6h 20m
Merged PRs (30d)
16

Description

### Which packages are impacted by your issue?

`@graphql-codegen/typescript-react-query`

### Describe the bug

If a query does not have any required arguments, then the codegen plugin currently generates a hook that looks like this:

```tsx
export const useDummyQuery = <
...
queryKey: variables === undefined ? ['Dummy'] : ['Dummy', variables]
...
// exposeQueryKeys:
useDummyQuery.getKey = (variables?: DummyQueryVariables) => variables === undefined ? ['Dummy'] : ['Dummy', variables]
```

This ends up causing some confusion in the code. For example, `useDummyQuery()` will have a unique entry in the react-query cache compared to `useDummyQuery({})`. This also causes issues with query invalidation, since the key used to invalidate needs to match:

```tsx
const { data, ... } = useDummyQuery()

// elsewhere:
queryClient.invalidateQueries({ queryKey: useDummyQuery.getKey({}) }) // does not invalidate the above
```

Proposed solution:

If we default the query variable to an empty object then it should work as expected:

```tsx
useDummyQuery.getKey = (variables?: DummyQueryVariables) => variables === undefined ? ['Dummy', {}] : ['Dummy', variables]
```

This may be a breaking change if users were invalidating based on _exact_ query key matches without using the `.getKey` helper, although that seems unlikely:

```tsx
// Technically this will no longer work
queryClient.invalidateQueries({ queryKey: ['Dummy'], exact: true })
```

### Your Example Website or App

none

### Steps to Reproduce the Bug or Issue

1. Use graphQL Codegen with a query that takes no arguments. Make sure `exposeQueryKeys` is enabled.
2. When fetching data, use `const { data } = useSomeQuery()` without brackets
3. Have another button that invalidates the query with `queryClient.invalidateQueries({ queryKey: useSomeQuery.getKey({}) })` with brackets

Notice tha this does not re-fetch the data.

### Expected behavior

I would expect the query invalidation to force a refetch of the data

### Screenshots or Videos

_No response_

### Platform

- OS: macOS
- NodeJS: 18.17.1
- `graphql` version: 16.8.0
- `@graphql-codegen/typescript-react-query` version(s): 6.1.0

### Codegen Config File

```
---

schema:
- https://.../graphql:
headers:
apikey: ...
documents: ./src/**/*.graphql
config:
strictScalars: true
enumsAsConst: true
reactQueryVersion: 5
scalars:
...
generates:
./src/generated/types.ts:
plugins:
- add:
content: //@ts-nocheck
- typescript
- typescript-operations
- typescript-react-query:
fetcher: ...
addInfiniteQuery: true
exposeQueryKeys: true
exposeFetcher: true
errorType: Error
```

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