Add support for preloading a query via the raw generated module of th…

…at query. Will allow for great code splitting.

CHANGELOG.md

@@ -1,5 +1,7 @@
 # master
 
+- `preload` for queries are now exposed right on the raw generated GraphQL module coming from the Relay compiler, in addition to on the module generated from the PPX. This primarily paves the way for effective code splitting.
+
 # 0.8.2
 
 - Fix subscriptions function bindings, which was previously wrong (thanks @

packages/reason-relay/__tests__/Test_query-tests.js

@@ -84,7 +84,7 @@ describe("Query", () => {
     await t.screen.findByText("Preloaded Second is idle");
   });
 
-  test("using preloaded version works", async () => {
+  test("using preloaded directly from raw module works", async () => {
     queryMock.mockQuery(
       makeMockedQuery(
         {
@@ -106,7 +106,7 @@ describe("Query", () => {
       )
     );
 
-    t.fireEvent.click(t.screen.getByText("Test preloaded"));
+    t.fireEvent.click(t.screen.getByText("Test preloaded from raw module"));
 
     await t.screen.findByText("Preloaded Second is idle");
   });

packages/reason-relay/__tests__/Test_query.re

@@ -59,6 +59,8 @@ module Test = {
 
     let (status, setStatus) = React.useState(() => Some(`Online));
     let (preloadToken, setPreloadToken) = React.useState(() => None);
+    let (preloadTokenFromModule, setPreloadTokenFromModule) =
+      React.useState(() => None);
     let (fetchedResult, setFetchedResult) = React.useState(() => None);
 
     let collectUsers = (res: Query.Types.response) =>
@@ -116,6 +118,20 @@ module Test = {
         }}>
         {React.string("Test preloaded")}
       </button>
+      <button
+        onClick={_ => {
+          setPreloadTokenFromModule(_ =>
+            Some(
+              TestQuery_graphql.preload(
+                ~environment,
+                ~variables={status: Some(`Idle)},
+                (),
+              ),
+            )
+          )
+        }}>
+        {React.string("Test preloaded from raw module")}
+      </button>
       <button
         onClick={_ =>
           Query.fetch(
@@ -147,6 +163,10 @@ module Test = {
        | Some(preloadToken) => <TestPreloaded preloadToken />
        | None => React.null
        }}
+      {switch (preloadTokenFromModule) {
+       | Some(preloadToken) => <TestPreloaded preloadToken />
+       | None => React.null
+       }}
       {switch (fetchedResult) {
        | Some([|{firstName: "First", onlineStatus: Some(`Online)}|]) =>
          React.string("Fetched!")

packages/reason-relay/language-plugin/src/formatGeneratedModule.ts

@@ -12,12 +12,29 @@ const formatGeneratedModule: FormatModule = ({
   hash,
   sourceHash,
 }) => {
+  const preloadText =
+    // @ts-ignore The type definitions are actually wrong from DefinitivelyTyped
+    documentType === "ConcreteRequest" &&
+    moduleName.toLowerCase().endsWith("query_graphql")
+      ? `module Preload =
+  ReasonRelay.MakePreloadQuery({
+    type variables = Types.variables;
+    type queryPreloadToken = preloadToken;
+    let query = node;
+    let convertVariables = Internal.convertVariables;
+  });
+
+let preload = Preload.preload;`
+      : "";
+
   return printCode(`
 ${typeText || ""}
 
 let node: operationType = [%raw {json| ${processConcreteText(
     concreteText
   )} |json}];
+
+${preloadText}
 `);
 };
 

packages/reason-relay/src/ReasonRelay.re

@@ -682,6 +682,44 @@ module MakeUseQuery = (C: MakeUseQueryConfig) => {
   };
 };
 
+module type MakePreloadQueryConfig = {
+  type variables;
+  type queryPreloadToken;
+  let query: queryNode;
+  let convertVariables: variables => variables;
+};
+
+module MakePreloadQuery = (C: MakePreloadQueryConfig) => {
+  let preload:
+    (
+      ~environment: Environment.t,
+      ~variables: C.variables,
+      ~fetchPolicy: fetchPolicy=?,
+      ~fetchKey: string=?,
+      ~networkCacheConfig: cacheConfig=?,
+      unit
+    ) =>
+    C.queryPreloadToken =
+    (
+      ~environment,
+      ~variables,
+      ~fetchPolicy=?,
+      ~fetchKey=?,
+      ~networkCacheConfig=?,
+      (),
+    ) =>
+      _preloadQuery(
+        environment,
+        C.query,
+        variables |> C.convertVariables |> _cleanVariables,
+        {
+          fetchKey,
+          fetchPolicy: fetchPolicy |> mapFetchPolicy,
+          networkCacheConfig,
+        },
+      );
+};
+
 /**
  * FRAGMENT
  */
@@ -1228,4 +1266,4 @@ module MakeUseSubscription = (C: SubscriptionConfig) => {
           },
       },
     );
-};
+};

packages/reason-relay/src/ReasonRelay.rei

@@ -415,6 +415,8 @@ type fetchPolicy =
   | StoreAndNetwork // Like StoreOrNetwork, but always make a request regardless of if the data was there initially or not
   | NetworkOnly; // Always make a request, discard what's in the store
 
+let mapFetchPolicy: option(fetchPolicy) => option(string);
+
 /**
  * Internally used functors and configs.
  * You won't need to know about these.
@@ -471,6 +473,28 @@ module MakeUseQuery:
       C.response;
   };
 
+module type MakePreloadQueryConfig = {
+  type variables;
+  type queryPreloadToken;
+  let query: queryNode;
+  let convertVariables: variables => variables;
+};
+
+module MakePreloadQuery:
+  (C: MakePreloadQueryConfig) =>
+   {
+    let preload:
+      (
+        ~environment: Environment.t,
+        ~variables: C.variables,
+        ~fetchPolicy: fetchPolicy=?,
+        ~fetchKey: string=?,
+        ~networkCacheConfig: cacheConfig=?,
+        unit
+      ) =>
+      C.queryPreloadToken;
+  };
+
 /**
  * FRAGMENT
  */
@@ -726,4 +750,4 @@ module MakeUseSubscription:
         unit
       ) =>
       Disposable.t;
-  };
+  };