Make useView hook pass the list of referenced typenames to urql

Author: airhorns

packages/api-client-core/src/GadgetFunctions.ts

@@ -89,6 +89,7 @@ export interface ViewFunctionWithoutVariables<ResultT> {
   operationName: string;
   gqlFieldName: string;
   namespace?: string | string[] | null;
+  referencedTypenames?: string[];
   resultType: ResultT;
   plan(): GQLBuilderResult;
 }
@@ -99,6 +100,7 @@ export interface ViewFunctionWithVariables<VariablesT, ResultT> {
   operationName: string;
   gqlFieldName: string;
   namespace?: string | string[] | null;
+  referencedTypenames?: string[];
   variables: VariablesOptions;
   variablesType: VariablesT;
   resultType: ResultT;

packages/react/.changeset/silent-starfishes-cough.md

@@ -1,5 +1,6 @@
 ---
 "@gadgetinc/react": minor
+"@gadgetinc/api-client-core": patch
 ---
 
 Add `useView` hook for executing computed views

packages/react/spec/useView.spec.tsx

@@ -116,6 +116,7 @@ describe("useView", () => {
     expect(result.current[0].error).toBeFalsy();
 
     expect(client.executeQuery).toHaveBeenCalledTimes(1);
+    expect(client.executeQuery.mock.calls[0][1].additionalTypenames).toEqual(["Widget"]);
 
     expect(query).toMatchInlineSnapshot(`
       "query totalInStock {

packages/react/src/useView.ts

@@ -110,7 +110,18 @@ export function useView<VariablesT, F extends ViewFunction<VariablesT, any>>(
   }
 
   const memoizedVariables = useStructuralMemo(variables);
-  const memoizedOptions = useStructuralMemo(options);
+  const memoizedOptions = useStructuralMemo({
+    ...options,
+    context: {
+      ...options?.context,
+      // if the view exports the typenames it references, add them to the context so urql will refresh the view when mutations are made against these typenames
+      additionalTypenames: [
+        ...(options?.context?.additionalTypenames ?? []),
+        ...(typeof view == "string" ? [] : view.referencedTypenames ?? []),
+      ],
+    },
+  });
+
   const [plan, dataPath] = useMemo((): [plan: GQLBuilderResult, dataPath: string[]] => {
     if (typeof view == "string") {
       return [{ query: inlineViewQuery, variables: { query: view, variables: memoizedVariables } }, ["gellyView"]];