From a9a2bd7350736f22670099191d91269c79c7c6da Mon Sep 17 00:00:00 2001
From: Dan <dan@zuplo.com>
Date: Mon, 13 Jan 2025 14:56:21 +0100
Subject: [PATCH] Fix hydration refetch (#521)

---
 .../lib/plugins/openapi/client/useCreateQuery.ts   | 14 +++++++++++++-
 packages/zudoku/src/vite/plugin-api.ts             |  5 ++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/zudoku/src/lib/plugins/openapi/client/useCreateQuery.ts b/packages/zudoku/src/lib/plugins/openapi/client/useCreateQuery.ts
index 23820734..9ac87c29 100644
--- a/packages/zudoku/src/lib/plugins/openapi/client/useCreateQuery.ts
+++ b/packages/zudoku/src/lib/plugins/openapi/client/useCreateQuery.ts
@@ -12,7 +12,19 @@ export const useCreateQuery = <TResult, TVariables>(
     throw new Error("useGraphQL must be used within a GraphQLProvider");
   }
 
-  const hash = useMemo(() => hashit(variables[0] ?? {}), [variables]);
+  const hash = useMemo(() => {
+    if (
+      typeof variables[0] === "object" &&
+      variables[0] != null &&
+      "input" in variables[0] &&
+      typeof variables[0].input === "function"
+    ) {
+      // This is a pre-hashed name to ensure that the query key is consistent across server and client
+      return variables[0].input.name;
+    }
+
+    return hashit(variables[0] ?? {});
+  }, [variables]);
 
   return {
     queryFn: () => graphQLClient.fetch(query, ...variables),
diff --git a/packages/zudoku/src/vite/plugin-api.ts b/packages/zudoku/src/vite/plugin-api.ts
index 5d63e185..3867cc6f 100644
--- a/packages/zudoku/src/vite/plugin-api.ts
+++ b/packages/zudoku/src/vite/plugin-api.ts
@@ -1,5 +1,6 @@
 import fs from "node:fs/promises";
 import path from "node:path";
+import hashit from "object-hash";
 import { type Plugin } from "vite";
 import yaml from "yaml";
 import { type ZudokuPluginOptions } from "../config/config.js";
@@ -136,7 +137,9 @@ const viteApiPlugin = (getConfig: () => ZudokuPluginOptions): Plugin => {
                 `  input: {${Object.entries(versionMap)
                   .map(
                     ([version, path]) =>
-                      `"${version}": () => import("${path}")`,
+                      // The function name is a hash of the file name to ensure that each function has a unique and consistent identifier
+                      // We use this hash when creating a GraphQL query to ensure that the query key is consistent across server and client
+                      `"${version}": function _${hashit(path!)}() { return import("${path}"); }`,
                   )
                   .join(",")}},`,
                 `  navigationId: "${apiConfig.navigationId}",`,