tweaks

apollographql · Apr 15, 2024 · 8f3e580 · 8f3e580
1 parent 5da45f9
commit 8f3e580
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 6 deletions.
diff --git a/integration-test/nextjs/src/app/rsc/client.ts b/integration-test/nextjs/src/app/rsc/client.ts
@@ -1,4 +1,4 @@
-import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
+import { ApolloClient, InMemoryCache } from "@apollo/client";
 import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc";
 
 import { loadErrorMessages, loadDevMessages } from "@apollo/client/dev";

diff --git a/packages/client-react-streaming/src/PreloadQuery.tsx b/packages/client-react-streaming/src/PreloadQuery.tsx
@@ -4,6 +4,7 @@ import type {
   OperationVariables,
   QueryOptions,
   QueryReference,
+  FetchPolicy,
 } from "@apollo/client";
 import type { ReactNode } from "react";
 import React, { useId } from "react";
@@ -13,7 +14,8 @@ import { createTransportedQueryRef } from "./transportedQueryRef.js";
 export type RestrictedPreloadOptions = {
   fetchPolicy?: "cache-first";
   returnPartialData?: false;
-  // TODO: what else goes in here?
+  nextFetchPolicy?: FetchPolicy | undefined;
+  pollInterval?: undefined;
 };
 
 export type PreloadQueryOptions<TVariables, TData> = QueryOptions<
@@ -39,6 +41,7 @@ export function PreloadQuery<TData, TVariables extends OperationVariables>({
     ...options,
     fetchPolicy: "cache-first" as const,
     returnPartialData: false,
+    pollInterval: undefined,
   } satisfies RestrictedPreloadOptions;
 
   const transportedOptions = sanitizeForTransport(

diff --git a/packages/client-react-streaming/src/registerApolloClient.tsx b/packages/client-react-streaming/src/registerApolloClient.tsx
@@ -44,6 +44,42 @@ export function registerApolloClient<
 ): {
   getClient: () => AC;
   query: Awaited<AC>["query"];
+  /**
+   * Preloads data in React Server Components to be hydrated
+   * in Client Components.
+   *
+   * ### Example with `queryRef`
+   * `ClientChild` would call `useReadQuery` with the `queryRef`, the `Suspense` boundary is optional:
+   * ```js
+   * <PreloadQuery
+   *    options={{
+   *      query: QUERY,
+   *      variables: { foo: 1 }
+   *    }}
+   *  >
+   *   {(queryRef) => (
+   *     <Suspense fallback={<>loading</>}>
+   *       <ClientChild queryRef={queryRef} />
+   *     </Suspense>
+   *   )}
+   * </PreloadQuery>
+   * ```
+   *
+   * ### Example for `useSuspenseQuery`
+   * `ClientChild` would call the same query with `useSuspenseQuery`, the `Suspense` boundary is optional:
+   *  ```js
+   *  <PreloadQuery
+   *    options={{
+   *      query: QUERY,
+   *      variables: { foo: 1 }
+   *    }}
+   *  >
+   *    <Suspense fallback={<>loading</>}>
+   *      <ClientChild />
+   *    </Suspense>
+   *  </PreloadQuery>
+   *  ```
+   */
   PreloadQuery: PreloadQueryComponent;
 } {
   const getClient = makeGetClient(makeClient);
@@ -121,10 +157,6 @@ interface PreloadQueryProps<TData, TVariables> {
 }
 
 interface PreloadQueryComponent {
-  /**
-   * Preloads data in React Server Components to be hydrated
-   * in Client Components.
-   */
   <TData, TVariables extends OperationVariables>(
     props: PreloadQueryProps<TData, TVariables>
   ): React.ReactNode;