apollographql / apollographql/apollo-client-integrations

PreloadQuery render-prop + useReadQuery throws "uncached promise" on Next 16 / React 19 / AC 4.1.9

Open
#553 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
556
Forks
53
PR merge metrics
No merged PRs in 30d

Description

Issue Description

Following the documented PreloadQuery + useReadQuery pattern (render-prop, passing queryRef to a Client Component), React throws:

Warning: A component was suspended by an uncached promise. Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework.

The Suspense fallback also flashes on initial render. Replacing useReadQuery with useSuspenseQuery (the alternative pattern in the README) works correctly.

Versions
  • next: 16.1.7
  • react: 19.2.4
  • react-dom: 19.2.4
  • @apollo/client: 4.1.9
  • @apollo/client-integration-nextjs: 0.14.5
  • @apollo/client-react-streaming: 0.14.5 (transitive, single instance)

npm ls @apollo/client shows a single deduped instance — no duplicate installations.

Reproduction
Server Component (app/page.tsx)
<PreloadQuery query={QUERY} variables={{ currentPage: 1 }}>
  {(queryRef) => (
    <Suspense fallback={<>loading</>}>
      <ChildClient queryRef={queryRef} />
    </Suspense>
  )}
</PreloadQuery>

"use client"
import { useReadQuery, useQueryRefHandlers } from "@apollo/client/react"
import { useWrapTransportedQueryRef } from "@apollo/client-react-streaming"

export function ChildClient({ queryRef }) {
  const wrappedRef = useWrapTransportedQueryRef(queryRef)   // tried with and without this
  const { data } = useReadQuery(wrappedRef)
  const { fetchMore } = useQueryRefHandlers(wrappedRef)
  // ...
}

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the app/page.tsx PreloadQuery example and the ChildClient component shown in the issue, using the listed Next.js, React, and Apollo versions. Compare the render-prop/useReadQuery path with the working useSuspenseQuery alternative and reproduce the uncached-promise warning; done means the documented pattern renders without the warning or initial Suspense fallback flash.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.