'PreloadQuery' cannot be used as a JSX component.

[anilahsu]

I have registered Apollo Client and exported the PreloadQuery in a TypeScript file as follows:

export const { getClient, query, PreloadQuery } = registerApolloClient(() => {
  return new ApolloClient({
    cache: new InMemoryCache(),
    link: httpLink,
  });
});

I then used the PreloadQuery in a Next.js 14 server component as shown below:

<PreloadQuery
    query={CaseStudies}
    variables={{
      page: 1,
      pageSize: 8,
      isProd: isProd || undefined,
    }}
>
    <Suspense fallback={<Loading />}>
        <Children />
    </Suspense>
</PreloadQuery>

However, I encountered the following error:

'PreloadQuery' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.
    Type 'undefined' is not assignable to type 'Element | null'.

Environment

• Next.js version: 14.2.3
• @apollo/client: 3.10.4
• @apollo/experimental-nextjs-app-support: ^0.11.0

[phryneas]

Good catch - it seems that the React 19 types might be more permissive here than the React 18 types, so I didn't notice.

Could you please give this version from #313 a try and report back if it fixes the problem?

    npm i @apollo/experimental-nextjs-app-support@0.0.0-commit-release.0.1718009266.650f886
    npm i @apollo/client-react-streaming@0.0.0-commit-release.0.1718009266.650f886

[anilahsu]

@phryneas Thanks! It works and fixes the type issue!

[phryneas]

Released as 0.11.1. Thank you for the report!

[github-actions[bot]]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.