add preloadQuery useReadQuery tests

integration-test/playwright/src/preloadQuery.test.ts

@@ -14,7 +14,7 @@ const otherEnvs = matchesTag("@nextjs") ? "ssr,browser" : "browser";
 test.describe("PreloadQuery", () => {
   for (const [description, path] of [
     ["with useSuspenseQuery", "useSuspenseQuery"],
-    // ["with queryRef and useReadQuery", "queryRef-useReadQuery"],
+    ["with queryRef and useReadQuery", "queryRef-useReadQuery"],
   ] as const) {
     test.describe(description, () => {
       test(
@@ -71,7 +71,10 @@ test.describe("PreloadQuery", () => {
         test(
           "graphqlError on the server, transported to the browser, can be restarted",
           {
-            tag: ["@nextjs"],
+            tag: [
+              "@nextjs",
+              // TODO:  "@tanstack" causes a non-recoverable hydration mismatch
+            ],
           },
           async ({ page }) => {
             page.allowErrors?.();

integration-test/tanstack-start/app/routes/preloadQuery/queryRef-useReadQuery.tsx

@@ -1,9 +1,54 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { DynamicProductResult, QUERY } from "@integration-test/shared/queries";
+import {
+  QueryRef,
+  useQueryRefHandlers,
+  useReadQuery,
+  useSuspenseQuery,
+  type DefaultContext,
+} from "@apollo/client/index.js";
+import "@integration-test/shared/errorLink";
+import { createFileRoute } from "@tanstack/react-router";
+import { Suspense } from "react";
 
-export const Route = createFileRoute('/preloadQuery/queryRef-useReadQuery')({
+export const Route = createFileRoute("/preloadQuery/queryRef-useReadQuery")({
   component: RouteComponent,
-})
+  validateSearch: (search: Record<string, unknown>) => {
+    return {
+      errorIn: search.errorIn as DefaultContext["error"],
+    };
+  },
+  loaderDeps: ({ search: { errorIn } }) => ({ errorIn }),
+  loader: async ({ context: { preloadQuery }, deps: { errorIn } }) => {
+    const queryRef = preloadQuery(QUERY, {
+      context: { delay: 1000, ...(errorIn ? { error: errorIn } : {}) },
+    });
+    return {
+      queryRef,
+    };
+  },
+});
 
 function RouteComponent() {
-  return <div>Hello "/preloadQuery/queryRef-useReadQuery"!</div>
+  const { queryRef } = Route.useLoaderData();
+  return (
+    <Suspense fallback={<>loading</>}>
+      <Child queryRef={queryRef} />
+    </Suspense>
+  );
+}
+
+function Child({ queryRef }: { queryRef: QueryRef<DynamicProductResult> }) {
+  const { refetch } = useQueryRefHandlers(queryRef);
+  const { data } = useReadQuery(queryRef);
+  return (
+    <>
+      <ul>
+        {data.products.map(({ id, title }: any) => (
+          <li key={id}>{title}</li>
+        ))}
+      </ul>
+      <p>Queried in {data.env} environment</p>
+      <button onClick={() => refetch()}>refetch</button>
+    </>
+  );
 }