Next.js Discord

Discord Forum

Nextjs with apollo client caching issue

Unanswered
Bonga shad posted this in #help-forum
Open in Discord
Bonga shadOP
In https://www.gopal-adhikari.com.np/ ( Deployed in Vercel ) website, I am using the apollo client to fetch all the blog from the hashnode server in Nextjs 14 ( app router ).

I am facing a cahing issue here. I didn't get the new data ( latest blog ) in the live url but I can see the latest blog in the localhost ( dev and prod ) .

client.ts code

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(),

            link: new HttpLink({
                uri: "https://gql.hashnode.com",
                fetch: async (uri, options) => {
                    const res = await fetch(uri, {
                        ...options,
                        next: {
                            ...options?.next,
                            revalidate: 60 * 60, // 1h
                        },
                    });

                    return res;
                },
            }),

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


query
export const getPublications = async (first: number, after?: string | null) => {
    try {
        const { data } = await getClient().query<PublicationsQuery>({
            query: PublicationsDocument,
            variables: { host: site.host, first, after },
        });

        return data;
    } catch (error) {
        return null;
    }
};

1 Reply

Bonga shadOP
I tried multiple methods such as
- Redeployed the live url in vercel
- Modified code to not cache, i.e

            link: new HttpLink({
                uri: "https://gql.hashnode.com",
                fetch: async (uri, options) => {
                    const res = await fetch(uri, {
                        ...options,
                        cache: "no-store",
                    });

                    return res;
                },
            }),

Still didn't worked