Generated useInfiniteQuery hook code has typescript error with spread operator being applied on `metadata.pageParams` (`unknown` type)

[anthonyn60]

Which packages are impacted by your issue?

@graphql-codegen/typescript-react-query

Describe the bug

The generated hook code for infinite queries applies the spread operator on metaData.pageParam, which is of type unknown. Typescript complains about this.

Your Example Website or App

/

Steps to Reproduce the Bug or Issue

My query has an after variable with a custom fetcher that has this signature:

export const graphQLFetch = <TData, TVariables>(
  query: string,
  variables?: TVariables,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  options?: RequestInit["headers"]
): ((variables?: TVariables) => Promise<TData>) => {

My query looks like:

query GetFulfillmentOrdersForIndex(
  $first: Int!
  $after: String
  $orderBy: FulfillmentOrderSortInput
  ...
) {
  fulfillmentOrders(
    first: $first
    after: $after
    orderBy: $orderBy
    ...
  ) {
    edges {
      node {
         ...      
       }
    }
    pageInfo {
      endCursor
      hasNextPage
    }
  }
}

Expected behavior

The generated code is free of errors from Typescript. If the spread operator needs to be applied here (to pass the page variables into the query), perhaps the generated code could cast metadata.pageParam into an object?

Screenshots or Videos

Platform

• OS: macOS
• NodeJS: 16.20.1
• graphql version: 16.8.1
• @graphql-codegen/* version(s): 5 for CLI, deps:

    "@graphql-codegen/core" "^4.0.0"
    "@graphql-codegen/plugin-helpers" "^5.0.1"
    "@graphql-tools/apollo-engine-loader" "^8.0.0"
    "@graphql-tools/code-file-loader" "^8.0.0"
    "@graphql-tools/git-loader" "^8.0.0"
    "@graphql-tools/github-loader" "^8.0.0"
    "@graphql-tools/graphql-file-loader" "^8.0.0"
    "@graphql-tools/json-file-loader" "^8.0.0"
    "@graphql-tools/load" "^8.0.0"
    "@graphql-tools/prisma-loader" "^8.0.0"
    "@graphql-tools/url-loader" "^8.0.0"
    "@graphql-tools/utils" "^10.0.0"
  

### Codegen Config File

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

const config: CodegenConfig = {
  overwrite: true,
  schema: "graphql/schema.graphql",
  documents: "**/*.graphql",
  generates: {
    "graphql/generated.ts": {
      plugins: [
        "typescript",
        "typescript-operations",
        "typescript-react-query"
      ],
      config: {
        exposeFetcher: true,
        exposeMutationKeys: true,
        exposeQueryKeys: true,
        enumsAsConst: true,
        addInfiniteQuery: true,
        reactQueryVersion: 5,
        fetcher: {
          func: "./graphql-fetch#graphQLFetch",
          isReactHook: false
        }
      }
    },
    "graphql/graphql.schema.json": {
      plugins: ["introspection"]
    }
  }
};

export default config;


### Additional context

_No response_

[gjdame]

I am also having this same problem. Any update on this or did you find a solution @anthonyn60 ?

[anthonyn60]

I have not @gjdame

I saw someone else ran into it here, also without a solution: https://github.com/dotansimha/graphql-code-generator-community/pull/434#issuecomment-1909138484

[vdeantoni]

My setup is fairly custom, I have a dedicated package to deal with these generated files soI added "noCheck": true to the tsconfig of this little package, not ideal but until this is fixed I'm unblocked