dotansimha / dotansimha/graphql-code-generator-community

Support of @tanstack/react-query's `useQueries` hook

Open
#16 4 comments 7 reactions 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.**

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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.