dotansimha / dotansimha/graphql-code-generator-community
[typescript-react-query] Incorrect 'options 'type for generated useInfinite queries
- Dominant language
- TypeScript
- Stars
- 137
- Forks
- 195
- Avg merge
- 6h 20m
- Merged PRs (30d)
- 16
Description
Hello !
I'm trying to use `@graphql-codegen/typescript-react-query` plugin to generate the react-query hooks to use my graphql endpoint.
I spotted an error in the resulting generated hooks for infinite queries.
This is what the plugin is actually generating me:
```typescript
export const useInfiniteFetchProductsQuery = <
TData = ShopifyFetchProductsQuery,
TError = unknown
>(
dataSource: { endpoint: string, fetchParams?: RequestInit },
pageParamKey: keyof ShopifyFetchProductsQueryVariables,
variables?: ShopifyFetchProductsQueryVariables,
options?: UseQueryOptions
) =>
useInfiniteQuery(
variables === undefined ? ['fetchProducts.infinite'] : ['fetchProducts.infinite', variables],
(metaData) => fetcher(dataSource.endpoint, dataSource.fetchParams || {}, FetchProductsDocument, {...variables, ...(metaData.pageParam ?? {})})(),
options
);
```
While it should be:
```typescript
export const useInfiniteFetchProductsQuery = <
TData = ShopifyFetchProductsQuery,
TError = unknown
>(
dataSource: { endpoint: string, fetchParams?: RequestInit },
pageParamKey: keyof ShopifyFetchProductsQueryVariables,
variables?: ShopifyFetchProductsQueryVariables,
options?: UseInfiniteQueryOptions
) =>
useInfiniteQuery(
variables === undefined ? ['fetchProducts.infinite'] : ['fetchProducts.infinite', variables],
(metaData) => fetcher(dataSource.endpoint, dataSource.fetchParams || {}, FetchProductsDocument, {...variables, ...(metaData.pageParam ?? {})})(),
options
);
```
Notice the difference in the `options` hook argument: `UseQueryOptions` vs `UseInfiniteQueryOptions`.
After some investigations, I've found that the problem is located in this line of code:
https://github.com/dotansimha/graphql-code-generator/blob/77effb8b8f7b10c3175b8cb1d30f0fd47e96cee9/packages/plugins/typescript/react-query/src/fetcher-fetch.ts#L51
It should not use `hookConfig.query.options` but `hookConfig.infiniteQuery.options`
If it's okay, I'll look at open a PR to fix this. Let me know if this sounds good to you! :)
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.