apollographql / apollographql/apollo-client-integrations

ISR with SSR

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

Description

Hello, i am writting you because i need some kind of help. I am creating website with Next js 14.0.3 (App router). I am using this package to fetch data from Strapi. I need to fetch data from server and i want to cache them. Something like ISR in Pages routers. I need to invalidate thme every hour. So data should be fetch after hour again with fresh data. I dont know why but this code below doest not works. i have revalidate on 60 (which means 60seconds to debug it). But if i run `next build` and then `next start` data has been fetched during buildtime, but it never change again.

Can someone discuss with me waht am i doing wrong? I have lost a lot of hours with this issue, and i dont know what am doing wrong.

```import process from "process"

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

export const { getClient } = registerApolloClient(() => {
return new ApolloClient({
cache: new InMemoryCache(),
link: new HttpLink({
// this needs to be an absolute url, as relative urls cannot be used in SSR
uri:
typeof window === "undefined"
? process.env.SERVER_GRAPHQL_URL
: process.env.NEXT_PUBLIC_GRAPHQL_URL,
// you can disable result caching here if you want to
// (this does not work if you are rendering your page with 'export const dynamic = "force-static"')
}),
})
})

--- broker/[id]/page.tsx

const client = getClient()

type Props = {
params: { id: string }
searchParams: { [key: string]: string | string[] | undefined }
}

export const revalidate = 60
export const dynamicParams = true;

export default async function BrokerDetail({ params }: Props) {
const { data } = await client.query<
BrokerQueryType,
BrokerQueryVariablesType
>({
query: BROKER_QUERY,
variables: {
id: params.id,
},
fetchPolicy: "cache-first",
})
```

Thank you so much :cry:

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with broker/[id]/page.tsx and the exported revalidate value, then inspect how the Apollo client query and its cache interact with Next.js App Router rendering. Reproduce the behavior with next build and next start, and confirm that the page fetches fresh data after the configured interval.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.