simplify missingFieldHandlers

CHANGELOG.md

@@ -1,5 +1,7 @@
 # master
 
+- Simplify `missingFieldHandlers`. https://github.com/zth/rescript-relay/pull/589
+
 # 4.1.0
 
 - Add support for `autoExhaustiveTypes` config and a `@nonExhaustive` directive to control automatic exhaustive checks for unions/interfaces.

packages/rescript-relay/__tests__/Test_misingFieldHandlers-tests.js → packages/rescript-relay/__tests__/Test_misingFieldHandlersLinked-tests.js

@@ -1,16 +1,15 @@
 require("@testing-library/jest-dom/extend-expect");
 const t = require("@testing-library/react");
-const React = require("react");
 const queryMock = require("./queryMock");
 
-const { test_missingFieldHandlers } = require("./Test_missingFieldHandlers.bs");
+const { test_missingFieldHandlers } = require("./Test_missingFieldHandlersLinked.bs");
 const { fireEvent } = require("@testing-library/react");
 const ReactTestUtils = require("react-dom/test-utils");
 
-describe("Missing field handlers", () => {
+describe("Missing linked field handlers", () => {
   test("resolves nodes via top level node field from cache automatically", async () => {
     queryMock.mockQuery({
-      name: "TestMissingFieldHandlersMeQuery",
+      name: "TestMissingFieldHandlersLinkedMeQuery",
       data: {
         loggedInUser: {
           firstName: "First",

packages/rescript-relay/__tests__/Test_misingFieldHandlersPlural-tests.js

@@ -0,0 +1,35 @@
+require("@testing-library/jest-dom/extend-expect");
+const t = require("@testing-library/react");
+const queryMock = require("./queryMock");
+
+const { test_missingFieldHandlers } = require("./Test_missingFieldHandlersPlural.bs");
+const { fireEvent } = require("@testing-library/react");
+const ReactTestUtils = require("react-dom/test-utils");
+
+describe("Missing plural linked field handlers for user", () => {
+  test("resolves a plural linked record field via an equivalent field from cache automatically", async () => {
+    queryMock.mockQuery({
+      name: "TestMissingFieldHandlersPluralQuery",
+      data: {
+        topOnlineUserList: [
+          {
+            firstName: "Björn",
+            id: "123",
+          },
+          {
+            firstName: "Sven",
+            id: "456",
+          },
+      ]
+      },
+    });
+
+    t.render(test_missingFieldHandlers());
+    await t.screen.findByText("1: Björn - Sven");
+
+    ReactTestUtils.act(() => {
+      fireEvent.click(t.screen.getByText("Show next"));
+    });
+    await t.screen.findByText("2: Björn - Sven");
+  });
+});

packages/rescript-relay/__tests__/Test_misingFieldHandlersScalar-tests.js

@@ -0,0 +1,29 @@
+require("@testing-library/jest-dom/extend-expect");
+const t = require("@testing-library/react");
+const queryMock = require("./queryMock");
+
+const { test_missingFieldHandlers } = require("./Test_missingFieldHandlersScalar.bs");
+const { fireEvent } = require("@testing-library/react");
+const ReactTestUtils = require("react-dom/test-utils");
+
+describe("Missing scalar field handlers", () => {
+  test("resolves nodes via top level node field plus scalar equivalence from cache automatically", async () => {
+    queryMock.mockQuery({
+      name: "TestMissingFieldHandlersScalarMeQuery",
+      data: {
+        loggedInUser: {
+          lastName: "Last",
+          id: "123",
+        },
+      },
+    });
+
+    t.render(test_missingFieldHandlers());
+    await t.screen.findByText("1: Last");
+
+    ReactTestUtils.act(() => {
+      fireEvent.click(t.screen.getByText("Show next"));
+    });
+    await t.screen.findByText("2: Last");
+  });
+});

packages/rescript-relay/__tests__/Test_missingFieldHandlers.res → packages/rescript-relay/__tests__/Test_missingFieldHandlersLinked.res

@@ -1,5 +1,5 @@
 module Query = %relay(`
-    query TestMissingFieldHandlersQuery {
+    query TestMissingFieldHandlersLinkedQuery {
       node(id: "123") {
         ... on User {
           firstName
@@ -9,7 +9,7 @@ module Query = %relay(`
 `)
 
 module MeQuery = %relay(`
-    query TestMissingFieldHandlersMeQuery {
+    query TestMissingFieldHandlersLinkedMeQuery {
       loggedInUser {
         firstName
       }

packages/rescript-relay/__tests__/Test_missingFieldHandlersPlural.res

@@ -0,0 +1,84 @@
+module Query = %relay(`
+    query TestMissingFieldHandlersPluralQuery {
+      topOnlineUserList {
+          firstName 
+      }
+    }
+`)
+
+module BestiesQuery = %relay(`
+    query TestMissingFieldHandlersPluralBestiesQuery {
+      onlineBesties {
+          firstName
+      }
+    }
+`)
+
+module RenderBesties = {
+  @react.component
+  let make = () => {
+    let query = BestiesQuery.use(~variables=(), ~fetchPolicy=StoreOnly)
+
+    React.string(
+      "2: " ++
+      query.onlineBesties
+      ->Option.getOr([])
+      ->Array.keepSome
+      ->Array.map(({firstName}) => firstName)
+      ->Array.join(" - "),
+    )
+  }
+}
+
+module Test = {
+  @react.component
+  let make = () => {
+    let query = Query.use(~variables=())
+    let (showNext, setShowNext) = React.useState(() => false)
+
+    <>
+      <div>
+        {React.string(
+          "1: " ++
+          query.topOnlineUserList
+          ->Option.getOr([])
+          ->Array.keepSome
+          ->Array.map(({firstName}) => firstName)
+          ->Array.join(" - "),
+        )}
+      </div>
+      {showNext
+        ? <RenderBesties />
+        : <button onClick={_ => setShowNext(_ => true)}> {React.string("Show next")} </button>}
+    </>
+  }
+}
+
+@live
+let test_missingFieldHandlers = () => {
+  let network = RescriptRelay.Network.makePromiseBased(~fetchFunction=RelayEnv.fetchQuery)
+
+  let environment = RescriptRelay.Environment.make(
+    ~network,
+    ~store=RescriptRelay.Store.make(~source=RescriptRelay.RecordSource.make()),
+    ~missingFieldHandlers=[
+      PluralLinked({
+        handle: (field, record, _args, _store) =>
+          switch (record, field.name) {
+          | (Value(record), "onlineBesties") =>
+            module RP = RescriptRelay.RecordProxy
+            RP.getLinkedRecords(record, ~name="topOnlineUserList")
+            ->Option.map(array =>
+              Array.map(array, record => Option.map(record, RP.getDataId)->Nullable.fromOption)
+            )
+            ->Nullable.fromOption
+          | _ => undefined
+          },
+      }),
+    ],
+  )
+
+  <TestProviders.Wrapper environment>
+    <Test />
+  </TestProviders.Wrapper>
+}

packages/rescript-relay/__tests__/Test_missingFieldHandlersScalar.res

@@ -0,0 +1,68 @@
+module Query = %relay(`
+    query TestMissingFieldHandlersScalarQuery {
+      node(id: "123") {
+        ... on User {
+          surname
+        }
+      }
+    }
+`)
+
+module MeQuery = %relay(`
+    query TestMissingFieldHandlersScalarMeQuery {
+      loggedInUser {
+        lastName
+      }
+    }
+`)
+
+module RenderMe = {
+  @react.component
+  let make = () => {
+    let query = Query.use(~variables=(), ~fetchPolicy=StoreOnly)
+
+    switch query.node {
+    | Some(User(user)) => React.string("2: " ++ user.surname)
+    | _ => React.string("-")
+    }
+  }
+}
+
+module Test = {
+  @react.component
+  let make = () => {
+    let query = MeQuery.use(~variables=())
+    let (showNext, setShowNext) = React.useState(() => false)
+
+    <>
+      <div> {React.string("1: " ++ query.loggedInUser.lastName)} </div>
+      {showNext
+        ? <RenderMe />
+        : <button onClick={_ => setShowNext(_ => true)}> {React.string("Show next")} </button>}
+    </>
+  }
+}
+
+@live
+let test_missingFieldHandlers = () => {
+  let network = RescriptRelay.Network.makePromiseBased(~fetchFunction=RelayEnv.fetchQuery)
+
+  let environment = RescriptRelay.Environment.make(
+    ~network,
+    ~store=RescriptRelay.Store.make(~source=RescriptRelay.RecordSource.make()),
+    ~missingFieldHandlers=[
+      Scalar({
+        handle: (field, record, _args, _store) =>
+          switch (record, field.name) {
+          | (Value(record), "surname") if RescriptRelay.RecordProxy.getType(record) === "User" =>
+            RescriptRelay.RecordProxy.getValueString(record, ~name="lastName")->Nullable.fromOption
+          | _ => undefined
+          },
+      }),
+    ],
+  )
+
+  <TestProviders.Wrapper environment>
+    <Test />
+  </TestProviders.Wrapper>
+}