dotansimha / dotansimha/graphql-code-generator-community

[typescript-react-query] option for exposeQueryKeys to have optional variables

Open
#56 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

**Is your feature request related to a problem? Please describe.**

this is the current state of the `typescript-react-query`

```gql
type Query {
user(id: ID!): User
}
```

```gql
query findUser($userId: ID!) {
user(id: $userId) {
...UserFields
}
}
```

```yaml
generates:
types-and-hooks.tsx:
plugins:
- typescript
- typescript-operations
- typescript-react-query
config:
exposeQueryKeys: true
```

```ts
export const FindUserDocument = `
query findUser($userId: ID!) {
user(id: $userId) {
...UserFields
}
}
${UserFieldsFragmentDoc}`;
export const useFindUserQuery = <
TData = FindUserQuery,
TError = unknown
>(
dataSource: { endpoint: string, fetchParams?: RequestInit },
variables: FindUserQueryVariables,
options?: UseQueryOptions
) =>
useQuery(
['findUser', variables],
fetcher(dataSource.endpoint, dataSource.fetchParams || {}, FindUserDocument, variables),
options
);

useFindUserQuery.getKey = (variables: FindUserQueryVariables) => ['findUser', variables];
;
```

there is no way for me to get the findUser query key without putting in variables, for example I want to invalidateQueries to all `todos` key

```ts
import { useQuery, useQueryClient } from '@tanstack/react-query'

// Get QueryClient from the context
const queryClient = useQueryClient()

queryClient.invalidateQueries({ queryKey: ['todos'] })

// Both queries below will be invalidated
const todoListQuery = useQuery({
queryKey: ['todos'],
queryFn: fetchTodoList,
})
const todoListQuery = useQuery({
queryKey: ['todos', { page: 1 }],
queryFn: fetchTodoList,
})
```

**Describe the solution you'd like**

- add a new option to ignore variable for query key, so that we can invalidateQueries with the getKey without variables

**Describe alternatives you've considered**

- set the query key as constant and expose it directly without using the `getKey` function

```ts
useFindUserQuery.key = 'findUser';
```

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.