use optional fields for refetch variables (#588)

* use optional fields for refetch variables

* add more tests for refetchVariables

* update changelog

* add refetching tests with record for refetchVariables

* update test-project-res

* add test preloaded RelaySchemaAssets_graphql to .gitignore

* update relay

Author: tsnobip

CHANGELOG.md

@@ -1,6 +1,7 @@
 # master
 
 - Simplify `missingFieldHandlers`. https://github.com/zth/rescript-relay/pull/589
+- Fix behavior of `refetchVariables` on optional variables. https://github.com/zth/rescript-relay/pull/588
 
 # 4.1.0
 

packages/relay

@@ -4,4 +4,5 @@ node_modules
 src/Dummy.re*
 .bsb.lock
 *.log
-relay-compiler
+relay-compiler
+__tests_preloaded__/__generated__/RelaySchemaAssets_graphql.res

packages/rescript-relay/.gitignore

@@ -10,12 +10,12 @@ describe("Fragment", () => {
   test("refetching works", async () => {
     queryMock.mockQuery({
       name: "TestRefetchingQuery",
-      variables: { beforeDate: "2023-01-01T00:00:00.000Z" },
+      variables: { beforeDate: "2023-01-01T00:00:00.000Z", showOnlineStatus: true, number: 10 },
       data: {
         loggedInUser: {
           id: "user-1",
           firstName: "First",
-          onlineStatus: null,
+          onlineStatus: "offline",
           friendsConnection: {
             totalCount: 20,
           },
@@ -40,6 +40,7 @@ describe("Fragment", () => {
         showOnlineStatus: true,
         friendsOnlineStatuses: ["Online", "offline"],
         beforeDate: null,
+        number:10,
       },
       data: {
         node: {

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

@@ -1,8 +1,10 @@
 module Query = %relay(`
-    query TestRefetchingQuery($beforeDate: Datetime) {
+    query TestRefetchingQuery($beforeDate: Datetime, $number: Number, $showOnlineStatus: Boolean!) {
       loggedInUser {
         ...TestRefetching_user @arguments(
           beforeDate: $beforeDate
+          number: $number
+          showOnlineStatus: $showOnlineStatus
         )
       }
     }
@@ -15,13 +17,14 @@ module Fragment = %relay(`
         friendsOnlineStatuses: { type: "[OnlineStatus!]" }
         showOnlineStatus: { type: "Boolean", defaultValue: false }
         beforeDate: { type: "Datetime" }
+        number: { type: "Number" }
       ) {
       firstName
       onlineStatus @include(if: $showOnlineStatus)
       friendsConnection(statuses: $friendsOnlineStatuses) {
         totalCount
       }
-      friends(beforeDate: $beforeDate) {
+      friends(beforeDate: $beforeDate, number: $number) {
         id
       }
     }
@@ -43,6 +46,8 @@ module Test = {
     let query = Query.use(
       ~variables={
         beforeDate: Date.fromString("2023-01-01T00:00:00.000Z"),
+        showOnlineStatus: true,
+        number: [10],
       },
     )
 
@@ -65,7 +70,6 @@ module Test = {
           startTransition(() => {
             refetch(
               ~variables=Fragment.makeRefetchVariables(
-                ~showOnlineStatus=Some(true),
                 ~friendsOnlineStatuses=Some([Online, Offline]),
                 ~beforeDate=None,
               ),

packages/rescript-relay/__tests__/Test_refetching.res

@@ -0,0 +1,73 @@
+require("@testing-library/jest-dom/extend-expect");
+const t = require("@testing-library/react");
+const React = require("react");
+const queryMock = require("./queryMock");
+const ReactTestUtils = require("react-dom/test-utils");
+
+const { test_refetching } = require("./Test_refetchingRecord.bs");
+
+describe("Fragment", () => {
+  test("refetching works when using a record for refetchVariables", async () => {
+    queryMock.mockQuery({
+      name: "TestRefetchingRecordQuery",
+      variables: { beforeDate: "2023-01-01T00:00:00.000Z", showOnlineStatus: true, number: 10 },
+      data: {
+        loggedInUser: {
+          id: "user-1",
+          firstName: "First",
+          onlineStatus: "offline",
+          friendsConnection: {
+            totalCount: 20,
+          },
+          friends: [
+            {
+              id: "user-2",
+            },
+          ],
+        },
+      },
+    });
+
+    t.render(test_refetching());
+
+    await t.screen.findByText("First is -");
+    await t.screen.findByText("Friends: 20");
+
+    queryMock.mockQuery({
+      name: "TestRefetchingRecordRefetchQuery",
+      variables: {
+        id: "user-1",
+        showOnlineStatus: true,
+        friendsOnlineStatuses: ["Online", "offline"],
+        beforeDate: null,
+        number:10,
+      },
+      data: {
+        node: {
+          __typename: "User",
+          id: "user-1",
+          firstName: "First",
+          onlineStatus: "Online",
+          friendsConnection: {
+            totalCount: 10,
+          },
+          friends: [
+            {
+              id: "user-2",
+            },
+            {
+              id: "user-3",
+            },
+          ],
+        },
+      },
+    });
+
+    ReactTestUtils.act(() => {
+      t.fireEvent.click(t.screen.getByText("Fetch online status"));
+    });
+
+    await t.screen.findByText("First is online");
+    await t.screen.findByText("Friends: 10");
+  });
+});

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

@@ -0,0 +1,98 @@
+module Query = %relay(`
+    query TestRefetchingRecordQuery($beforeDate: Datetime, $number: Number, $showOnlineStatus: Boolean!) {
+      loggedInUser {
+        ...TestRefetchingRecord_user @arguments(
+          beforeDate: $beforeDate
+          number: $number
+          showOnlineStatus: $showOnlineStatus
+        )
+      }
+    }
+`)
+
+module Fragment = %relay(`
+    fragment TestRefetchingRecord_user on User
+      @refetchable(queryName: "TestRefetchingRecordRefetchQuery")
+      @argumentDefinitions(
+        friendsOnlineStatuses: { type: "[OnlineStatus!]" }
+        showOnlineStatus: { type: "Boolean", defaultValue: false }
+        beforeDate: { type: "Datetime" }
+        number: { type: "Number" }
+      ) {
+      firstName
+      onlineStatus @include(if: $showOnlineStatus)
+      friendsConnection(statuses: $friendsOnlineStatuses) {
+        totalCount
+      }
+      friends(beforeDate: $beforeDate, number: $number) {
+        id
+      }
+    }
+`)
+
+module FragmentWithNoArgs = %relay(`
+    fragment TestRefetchingRecordNoArgs_query on Query
+      @refetchable(queryName: "TestRefetchingRecordNoArgsRefetchQuery")
+      {
+      loggedInUser {
+        id
+      }
+    }
+`)
+
+module Test = {
+  @react.component
+  let make = () => {
+    let query = Query.use(
+      ~variables={
+        beforeDate: Date.fromString("2023-01-01T00:00:00.000Z"),
+        showOnlineStatus: true,
+        number: [10],
+      },
+    )
+
+    let (data, refetch) = Fragment.useRefetchable(query.loggedInUser.fragmentRefs)
+
+    let (_, startTransition) = React.useTransition()
+
+    <div>
+      {React.string(
+        data.firstName ++
+        (" is " ++
+        switch data.onlineStatus {
+        | Some(Online) => "online"
+        | _ => "-"
+        }),
+      )}
+      <div> {React.string("Friends: " ++ data.friendsConnection.totalCount->Int.toString)} </div>
+      <button
+        onClick={_ => {
+          startTransition(() => {
+            refetch(
+              ~variables={
+                friendsOnlineStatuses: Some([Online, Offline]),
+                beforeDate: None,
+              },
+            )->RescriptRelay.Disposable.ignore
+          })
+        }}
+      >
+        {React.string("Fetch online status")}
+      </button>
+    </div>
+  }
+}
+
+@live
+let test_refetching = () => {
+  let network = RescriptRelay.Network.makePromiseBased(~fetchFunction=RelayEnv.fetchQuery)
+
+  let environment = RescriptRelay.Environment.make(
+    ~network,
+    ~store=RescriptRelay.Store.make(~source=RescriptRelay.RecordSource.make()),
+  )
+
+  <TestProviders.Wrapper environment>
+    <Test />
+  </TestProviders.Wrapper>
+}