dotansimha / dotansimha/graphql-code-generator-community

[typescript-react-query] Incorrect 'options 'type for generated useInfinite queries

Open
#191 1 comment 3 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.