apollographql / apollographql/apollo-client-integrations

Prefetch / suspense query not working as expected

Open
#323 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
556
Forks
53
PR merge metrics
No merged PRs in 30d

Description

So when i call my query via a suspense i would expect the fallback to show then the data to load and be displayed but what i get is.

The data displayed, a flash of the fallback then data displayed again.

here is my code.

```
function makeClient() {
const httpLink = new HttpLink({
uri: process.env.NEXT_PUBLIC_GRAPHQL_API,
fetchOptions: { cache: "no-store" },
});

// Use the `ApolloClient` from "@apollo/experimental-nextjs-app-support"
return new ApolloClient({
// Use the `InMemoryCache` from "@apollo/experimental-nextjs-app-support"
cache: new InMemoryCache({ resultCaching: false }),
link: from([new RetryLink(), errorLink, authLink, httpLink]),
});
}

// You need to create a component to wrap your app in
function ApolloWrapper({ children }: PropsWithChildren) {
return (

{children}

);
}
```

```
import { HttpLink } from "@apollo/client";
import {
ApolloClient,
InMemoryCache,
registerApolloClient,
} from "@apollo/experimental-nextjs-app-support";

export const { getClient, query, PreloadQuery } = registerApolloClient(
() =>
new ApolloClient({
cache: new InMemoryCache(),
link: new HttpLink({
uri: process.env.NEXT_PUBLIC_GRAPHQL_API,
fetchOptions: { cache: "no-cache" },
}),
}),
);
```

```
const SuspenseListingCarousel = ({ variables, ...props }: Props) => (

{(queryRef) => (

{[1, 2, 3, 4, 5].map((i) => (

))}

}
>


)}

);
```

```
'use client';

export const ListingCarousel = async ({
queryRef,
...props
}: Props & { queryRef: QueryRef }) => {
const { data } = useReadQuery(queryRef);
```

I have also tried useSuspenseQuery and i get the same result.

what i expect to happen is query starts server side, server sends fallback to client, server hydrates client sees data.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the provided Next.js App Router setup with ApolloWrapper, registerApolloClient, PreloadQuery, Suspense, and useReadQuery. Compare the observed fallback flash with the expected server-side query, fallback streaming, and client hydration behavior; done means the fallback and data render in the intended order without the extra flash.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, next.js, react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.