Add option to disable cache in server fetcher.

This can be set when NODE_ENV === development

Author: mvantellingen

.changeset/early-moons-joke.md

@@ -0,0 +1,5 @@
+---
+"@labdigital/react-query-opal": patch
+---
+
+Add option to disable cache in server fetcher. This can be set when NODE_ENV === development

src/server.test.ts

@@ -18,9 +18,9 @@ const errorResponse = JSON.stringify({
 });
 
 describe("gqlServerFetch", () => {
-	const gqlServerFetch = initServerFetcher("https://localhost/graphql");
 
 	it("should fetch a persisted query", async () => {
+		const gqlServerFetch = initServerFetcher("https://localhost/graphql");
 		const mockedFetch = fetchMock.mockResponse(successResponse);
 		const gqlResponse = await gqlServerFetch(
 			query,
@@ -55,6 +55,7 @@ describe("gqlServerFetch", () => {
 	});
 
 	it("should persist the query if it wasn't persisted yet", async () => {
+		const gqlServerFetch = initServerFetcher("https://localhost/graphql");
 		// Mock server saying: 'PersistedQueryNotFound'
 		const mockedFetch = fetchMock
 			.mockResponseOnce(errorResponse)
@@ -96,6 +97,7 @@ describe("gqlServerFetch", () => {
 		);
 	});
 	it("should fetch a persisted query without revalidate", async () => {
+		const gqlServerFetch = initServerFetcher("https://localhost/graphql");
 		const mockedFetch = fetchMock.mockResponse(successResponse);
 		const gqlResponse = await gqlServerFetch(
 			query,
@@ -127,5 +129,39 @@ describe("gqlServerFetch", () => {
 		);
 	});
 
+	it("should disable cache when disableCache is set", async () => {
+		const gqlServerFetch = initServerFetcher("https://localhost/graphql", {
+			disableCache: true,
+		});
+		const mockedFetch = fetchMock.mockResponse(successResponse);
+		const gqlResponse = await gqlServerFetch(
+			query,
+			{ myVar: "baz" },
+
+			// These don't have impact due to disableCache
+			"force-cache",
+			{ revalidate: 900 }
+		);
+
+
+		expect(gqlResponse).toEqual(response);
+		expect(mockedFetch).toHaveBeenCalledTimes(1);
+		expect(mockedFetch).toHaveBeenCalledWith(
+			"https://localhost/graphql",
+			{
+				method: "POST", // <- Note that when persisting the query, the method is 'POST'
+				body: JSON.stringify({
+					operationName: "myQuery",
+					query: query.toString(),
+					variables: { myVar: "baz" }
+				}),
+				headers: {
+					"Content-Type": "application/json",
+				},
+				cache: 'no-store',
+				next: { revalidate: 0 },
+			}
+		);
+	});
 
 });

src/server.ts

@@ -8,22 +8,34 @@ import {
 	pruneObject,
 } from "./helpers";
 
+type Options = {
+	disableCache?: boolean;
+};
+
 export const initServerFetcher =
-	(url: string) =>
+	(url: string, options?: Options) =>
 	/**
 	 * Replace full queries with generated ID's to reduce bandwidth.
 	 * @see https://www.apollographql.com/docs/react/api/link/persisted-queries/#protocol
 	 */
 	async <TResponse, TVariables>(
 		astNode: DocumentTypeDecoration<TResponse, TVariables>,
 		variables: TVariables,
-		cache: RequestCache = 'force-cache',
+		cache: RequestCache = "force-cache",
 		next: NextFetchRequestConfig = {}
 	): Promise<GqlResponse<TResponse>> => {
 		const query = astNode.toString();
 		const operationName = extractOperationName(query);
 
-		// Disable cache when revalidate is not set
+		if (options?.disableCache) {
+			return gqlPost<TResponse>(
+				url,
+				JSON.stringify({ operationName, query, variables }),
+				"no-store",
+				{ ...next, revalidate: 0 }
+			);
+		}
+
 		const extensions = {
 			persistedQuery: {
 				version: 1,