dotansimha / dotansimha/graphql-code-generator-community
Support of @tanstack/react-query's `useQueries` hook
- 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.**
I would like to use @tanstack/react-query's useQueries`` hook but I realized it's not supported by `@graphql-codegen/typescript-react-query`.
Problem is detailed on this stackoverflow [question](https://stackoverflow.com/questions/74366649/how-to-use-usequeries-hook-tanstack-react-query-with-graphql-codegen/74373978#74373978) :
**Describe the solution you'd like**
I wish `@graphql-codegen/typescript-react-query` generates hooks that allow us to run parallel queries
**Describe alternatives you've considered**
For now : here is my current workaround :
```
import { useQueries, UseQueryOptions } from '@tanstack/react-query';
import { GraphQLClient } from 'graphql-request';
import {
GetOneStuffDocument,
GetOneStuffQuery,
GetOneStuffQueryVariables,
Scalars,
} from '@foo/data-access';
function fetcher(
client: GraphQLClient,
query: string,
variables?: TVariables,
headers?: RequestInit['headers']
) {
return async (): Promise =>
client.request(query, variables, headers);
}
export const useGetSomeStuffQuery = <
TData = GetOneStuffQuery,
TError = unknown
>(
client: GraphQLClient,
variables: { ids: Scalars['MongoObjectId'][] },
options?: UseQueryOptions,
headers?: RequestInit['headers']
) =>
useQueries({
queries: variables.ids.map((id) => ({
queryKey: ['GetSomeStuff', id],
queryFn: fetcher<
GetOneStuffQuery,
GetOneStuffQueryVariables
>(client, GetOneStuffDocument, { id }, headers),
options,
})),
});
```
**Additional context**
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.