Generate commitLocalPayload for elgible queries

CHANGELOG.md

@@ -1,9 +1,9 @@
 # master
 
-
+- Generate a `commitLocalPayload` for any query annotated with `@raw_response_type`, to allow comitting local only payloads in a type safe way.
 - _BREAKING CHANGE_ replace unsetValue with setValueToUndefined and setValueToNull
-- clean bindings, renamed internal raw types and functions with names ending with `Raw`, 
-use abstract records instead of Js.t objects for a more robust type-check and to avoid undefined fields
+- clean bindings, renamed internal raw types and functions with names ending with `Raw`,
+  use abstract records instead of Js.t objects for a more robust type-check and to avoid undefined fields
 
 # 0.11.0
 

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

@@ -0,0 +1,30 @@
+require("@testing-library/jest-dom/extend-expect");
+const t = require("@testing-library/react");
+const React = require("react");
+const queryMock = require("./queryMock");
+
+const { test_query } = require("./Test_localPayload.bs");
+
+describe("LocalPayload", () => {
+  test("commiting a local payload works", async () => {
+    queryMock.mockQuery({
+      name: "TestLocalPayloadQuery",
+      variables: {},
+      data: {
+        loggedInUser: {
+          firstName: "First",
+          avatarUrl: "avatar-url",
+        },
+      },
+    });
+
+    t.render(test_query());
+    await t.screen.findByText("Firstname: First");
+    await t.screen.findByText("Avatar: avatar-url");
+
+    t.fireEvent.click(t.screen.getByText("Update locally"));
+
+    await t.screen.findByText("Firstname: AnotherFirst");
+    await t.screen.findByText("Avatar: -");
+  });
+});

packages/reason-relay/__tests__/Test_localPayload.re

@@ -0,0 +1,83 @@
+module Query = [%relay.query
+  {|
+    query TestLocalPayloadQuery @raw_response_type {
+      loggedInUser {
+        id
+        ...TestLocalPayload_user
+      }
+    }
+|}
+];
+
+/**
+ * Don't mind this fragment, it's mostly here to check that
+ * it's actually getting inlined into the types for the query
+ * payload we're committing locally below.
+ */
+module Fragment = [%relay.fragment
+  {|
+  fragment TestLocalPayload_user on User {
+    firstName
+    avatarUrl
+  }
+|}
+];
+
+module Test = {
+  [@react.component]
+  let make = () => {
+    let environment = ReasonRelay.useEnvironmentFromContext();
+    let data = Query.use(~variables=(), ());
+    let user = Fragment.use(data.loggedInUser.fragmentRefs);
+
+    <div>
+      <div> {React.string("Firstname: " ++ user.firstName)} </div>
+      <div>
+        {React.string(
+           "Avatar: "
+           ++ (
+             switch (user.avatarUrl) {
+             | Some(avatarUrl) => avatarUrl
+             | None => "-"
+             }
+           ),
+         )}
+      </div>
+      <button
+        onClick={_ => {
+          Query.commitLocalPayload(
+            ~environment,
+            ~variables=(),
+            ~payload={
+              loggedInUser: {
+                id: data.loggedInUser.id,
+                firstName: "AnotherFirst",
+                avatarUrl: None,
+              },
+            },
+          )
+        }}>
+        {React.string("Update locally")}
+      </button>
+    </div>;
+  };
+};
+
+let test_query = () => {
+  let network =
+    ReasonRelay.Network.makePromiseBased(
+      ~fetchFunction=RelayEnv.fetchQuery,
+      (),
+    );
+
+  let environment =
+    ReasonRelay.Environment.make(
+      ~network,
+      ~store=
+        ReasonRelay.Store.make(~source=ReasonRelay.RecordSource.make(), ()),
+      (),
+    );
+  ();
+
+  <TestProviders.Wrapper environment> <Test /> </TestProviders.Wrapper>;
+};