Our Apollo Client implementation in Next.js (v14.2.5) SSR using the getClient() method is currently facing an issue where cached data is not being updated with the new data from the server.
import { HttpLink } from "@apollo/client";
import {
registerApolloClient,
ApolloClient,
InMemoryCache,
} from "@apollo/experimental-nextjs-app-support";
export const { getClient } = registerApolloClient(() => {
return new ApolloClient({
link: new HttpLink({
uri: `${process.env.NEXT_PUBLIC_ADMIN_BASE_URI}/api/graphql`,
}),
defaultOptions: {
query: {
fetchPolicy: "network-only",
},
},
ssrMode: true,
ssrForceFetchDelay: 1,
cache: new InMemoryCache({
resultCaching: false,
typePolicies: {
Yachts: {
merge: true,
fields: {
keyFeatures: {
merge(existing = [], incoming: any[], { readField }) {
const merged: any[] = existing ? existing.slice(0) : [];
const featureNameToIndex: Record<string, number> = {};
existing.forEach((feature: any, index: any) => {
const name = readField<string>("name", feature);
if (name) {
featureNameToIndex[name] = index;
}
});
incoming.forEach((feature) => {
const name = readField<string>("name", feature);
if (name) {
const index = featureNameToIndex[name];
if (typeof index === "number") {
merged[index] = {
...merged[index],
...feature,
};
} else {
featureNameToIndex[name] = merged.length;
merged.push(feature);
}
}
});
return merged;
},
},
},
},
},
}),
});
});
Despite confirming that the server data is correctly updated (verified with Postman), queries to our API are returning stale data. For example, the query below may return outdated information:
"use server";
import IBrokerino from "@/types/brokerino";
import { getClient } from "@/apollo";
import { gql } from "@apollo/client";
export const fetchBrokerinos = async (): Promise<IBrokerino[]> => {
const client = getClient();
const { data } = await client.query({
query: gql`
query Users {
Users(where: { displayOnWebsite: { equals: true } }) {
docs {
name
picture {
alt
sizes {
fhd {
url
width
height
}
}
}
phones {
prefix
number
}
langs
email
position
}
}
}
`,
});
return data.Users.docs;
};
Various attempts to resolve this issue, such as setting individual fetch-policy to no-cache for each query, have not been successful.
Our goal is to eliminate caching altogether to ensure fresh data is fetched from the API on every website load. We have explored other client options and tried disabling caching in Next.js without any improvements.
Below is an example of how we are executing the server-side query in page.tsx:
import Hero from "@/components/company/hero";
import Bar from "@/components/nav/bar";
import dynamic from "next/dynamic";
import { fetchBrokerinos } from "@/actions/brokerino";
const View = dynamic(() => import("@/components/view"));
const Footer = dynamic(() => import("@/components/footer"));
const Story = dynamic(() => import("@/components/company/story"));
const Accordion = dynamic(() => import("@/components/company/accordion"));
const Team = dynamic(() => import("@/components/company/team"));
const Lifestyle = dynamic(() => import("@/components/company/lifestyle"));
const Company = async () => {
return (
<main className="w-full flex flex-col justify-start items-center">
<Bar dynamicColor={-1} />
<View />
<Hero />
<Story />
<Accordion />
<Team brokerinos={await fetchBrokerinos()} />
<Lifestyle />
<Footer />
</main>
);
};
export default Company;