apollographql / apollographql/apollo-client-integrations
Prefetch / suspense query not working as expected
- 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