dotansimha / dotansimha/graphql-code-generator-community

Typescript React Query v5 wrong type infinite query

Open
#541 3 comments 7 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
137
Forks
195
Avg merge
6h 20m
Merged PRs (30d)
16

Description

### Which packages are impacted by your issue?

_No response_

### Describe the bug

Hi,

I also have an issue with infinite query. I tried upgrading to the last version.

I think this type is wrong

export function useInfiniteQuery<
TQueryFnData,
TError = DefaultError,
TData = InfiniteData,
TQueryKey extends QueryKey = QueryKey,
TPageParam = unknown,
>
Is it the good type for TData @TkDodo @neil585456525 ?

The TData = InfiniteData, should it be only TQueryFnData ?
because with the version 6.0.0 all my infinite queries types in typescript does not match what is really returned.

I have a strange typescript error on what I should have on my result data. I should have an array

{
pageParams : ... [],
pages: {
pageParams : unknown[],
pages: result[]
}[]
}
but what I really have is not an array

{
pageParams : ...,
pages: result[]
}
This type is used for the result and it already use InfiniteData. So I thinks it should not be in the useInfiniteQuery type params

export interface InfiniteQueryObserverSuccessResult<
TData = unknown,
TError = unknown,
> extends InfiniteQueryObserverBaseResult {
data: InfiniteData
error: null
isError: false
isLoading: false
isLoadingError: false
isRefetchError: false
isSuccess: true
status: 'success'
}

Thanks for your help!

### Your Example Website or App

https://codesandbox.io/p/devbox/wild-water-xrq5tp?file=%2Ftypes.ts%3A90%2C5

### Steps to Reproduce the Bug or Issue

Go to types find useInfiniteUserQuery
Types is
```
<
TData = InfiniteData,
TError = unknown
>
```

### Expected behavior

But should be

```
<
TData =UserQuery,
TError = unknown
>
```

### Screenshots or Videos

_No response_

### Platform

- OS: Mac 0S 14.0
- NodeJS: 20.10.0
"@graphql-codegen/add": "^5.0.0",
"@graphql-codegen/cli": "^4.0.1",
"@graphql-codegen/typescript": "^4.0.1",
"@graphql-codegen/typescript-operations": "^4.0.1",
"@graphql-codegen/typescript-react-query": "^6.0.0",

### Codegen Config File

import { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {
schema: "schema.graphql",
documents: "document.graphql",
generates: {
"types.ts": {
plugins: [
"typescript",
"typescript-operations",
"typescript-react-query",
],
config: {
reactQueryVersion: 5,
legacyMode: false,
addInfiniteQuery: true,
},
},
},
};

export default config;

### Additional context

_No response_

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the linked CodeSandbox, generated types.ts, and the useInfiniteUserQuery example, then inspect the typescript-react-query configuration using reactQueryVersion: 5 and addInfiniteQuery: true. Compare the generated useInfiniteQuery generics with InfiniteQueryObserverSuccessResult and confirm the expected result types compile without mismatch.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, typescript
Domain
tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.