Next.js Discord

Discord Forum

Nextjs + Apollo Client + Vercel

Unanswered
Bonga shad posted this in #help-forum
Open in Discord
Bonga shadOP
I am cuurenly using Nextjs 14 ( app router ), for my application. It's major dependency for Apollo Client, @apollo/experimental-nextjs-app-support and vercel for deployment,

Website is my portfolio + blogging using hashnode.

The thing is whenever I deploy the new blog in hashnode, it doesn't revalidate the blogs post. It shows the old stale data.

Here is client.ts code

import "server-only";

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

export const { getClient } = registerApolloClient(
    () =>
        new ApolloClient({
            cache: new InMemoryCache({
                typePolicies: {
                    Post: {
                        fields: {
                            coverImage: {
                                merge: true,
                            },
                        },
                    },
                },
            }),

            link: new HttpLink({
                uri: "https://gql.hashnode.com",
            }),

            headers: {
                Authorization: env.hashnodeAccessToken,
            },
        })
);

3 Replies

Bonga shadOP
I tried many diffeerent ways, such as 

        defaultOptions: {
                watchQuery: {
                    fetchPolicy: "no-cache",
                    nextFetchPolicy: "cache-first",
                },
            },

And played with other options like query , mutate and react.

I also tried this fetchOptions for not caching
        link: new HttpLink({
                uri: "https://gql.hashnode.com",
                fetchOptions: {
                    cache: "no-store",
                },
            }),


Somethimes it worked some times, doesn't.

I also tried export const dynamic = "force-static"; in respective page.

After several attempt I saw latest post but only locally. It's still stale data in prod
Arboreal ant
Same problem here with apollo, when I deploy with pnpm start locally my cache clears every hour but not when it's on vercel.
@Arboreal ant Same problem here with apollo, when I deploy with pnpm start locally my cache clears every hour but not when it's on vercel.
Bonga shadOP
My issue now is fixed.

For Apollo Client to work well with caching, it requires id field for working well.

So use id field in you graphql query wherever possible, though you don't need the id field, you need to use it in query because Apollo Client depends on id field.

Hope this helps