Skip to content

bug: useInfiniteQuery treats placeholderData as the source of truth for the types #4360

@YgorPerez

Description

@YgorPerez

Provide environment information

System:
OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
CPU: (2) x64 AMD EPYC
Memory: 329.46 MB / 2.01 GB
Container: Yes
Shell: 5.1.4 - /bin/bash
Binaries:
Node: 16.17.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 8.15.0 - /usr/local/bin/npm
Watchman: 20220528.183901.0 - /usr/local/bin/watchman
npmPackages:
@tanstack/react-query: ^4.28.0 => 4.29.5
@trpc/client: ^10.26.0 => 10.26.0
@trpc/next: ^10.26.0 => 10.26.0
@trpc/react-query: ^10.26.0 => 10.26.0
@trpc/server: ^10.26.0 => 10.26.0
next: ^13.4.1 => 13.4.2
react: 18.2.0 => 18.2.0
typescript: ^5.0.2 => 5.0.4

Describe the bug

  const projectsQuery1 = api.example.getProjects.useInfiniteQuery(
    { cursor: 0 },
    {
      getNextPageParam: (lastPage) => lastPage.nextCursor,
      placeholderData: { pageParams: [undefined], pages: [{data: "someData", nextCursor: 10}]},
      onSuccess(data) {
        console.log(data.data); // infers the types from the placeholderData, but doesn't error
      },
    }
  );

  const projectsQuery2 = api.example.getProjects.useInfiniteQuery(
    { cursor: 0 },
    {
      // for some reason the infiniteQuery treats the placeholderData
      // as the source of truth for the types, so the next line gives
      // an error because nextCursor doesn't exist in null
      getNextPageParam: (lastPage) => lastPage.nextCursor,
      placeholderData: { pageParams: [undefined], pages: [null] },
      onSuccess(data) {
        console.log(data.data); // infers the types from placeholderData and errors
      },
    }
  );

  // but the normal useQuery doesn't
  const projectsQuery3 = api.example.getProjects.useQuery(
    { cursor: 0 },
    {
      placeholderData: null,
      onSuccess(data) {
        console.log(data); // infers the types normally from the router and doesn't error
      },
    }
  );

I think the useInfiniteQuery should work just like useQuery in this case.

Link to reproduction

https://codesandbox.io/p/github/YgorPerez/trpc-bug/main?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522panelType%2522%253A%2522TABS%2522%252C%2522id%2522%253A%2522clhlb9qyu000a376kcd3mlyxy%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522panelType%2522%253A%2522TABS%2522%252C%2522id%2522%253A%2522clhlb9qyu000c376kmyrcbaj3%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clhlb9qyu000a376kcd3mlyxy%2522%253A%257B%2522id%2522%253A%2522clhlb9qyu000a376kcd3mlyxy%2522%252C%2522activeTabId%2522%253A%2522clhlbasr500vo376k8bv62rz9%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clhlb9qyu0009376keq2vtho1%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522view%2522%253A%2522code%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Fpages%252Findex.tsx%2522%252C%2522id%2522%253A%2522clhlbasr500vo376k8bv62rz9%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%257D%252C%2522clhlb9qyu000c376kmyrcbaj3%2522%253A%257B%2522id%2522%253A%2522clhlb9qyu000c376kmyrcbaj3%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clhlba64q009u376ky6a2r9cu%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522clhlba77o00f2376kw1z6voi1%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clhlba77o00f2376kw1z6voi1%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

To reproduce

Go to the file /src/pages/index.tsx

Additional information

No response

👨‍👧‍👦 Contributing

  • 🙋‍♂️ Yes, I'd be down to file a PR fixing this bug!

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions