usePrefetchableForwardPagination

CHANGELOG.md

@@ -1,6 +1,8 @@
 # master
 
 - Add support for the new Relay `@catch` directive. https://github.com/zth/rescript-relay/pull/549
+- Add support for `usePrefetchableForwardPagination`. https://github.com/zth/rescript-relay/pull/551
+- Remove `useBlockingPagination` since it's being removed from Relay.
 
 # 3.1.0
 

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

@@ -0,0 +1,94 @@
+const t = require("@testing-library/react");
+const React = require("react");
+const queryMock = require("./queryMock");
+const ReactTestUtils = require("react-dom/test-utils");
+
+const {
+  test_prefetchablePagination,
+} = require("./Test_prefetchablePagination.bs");
+
+describe("Prefetchable pagination", () => {
+  test("prefetching works", async () => {
+    queryMock.mockQuery({
+      name: "TestPrefetchablePaginationQuery",
+      data: {
+        loggedInUser: {
+          __typename: "User",
+          id: "user-1",
+          friendsConnection: {
+            pageInfo: {
+              endCursor: "2",
+              hasNextPage: true,
+              startCursor: "",
+              hasPreviousPage: false,
+            },
+            edges: [
+              {
+                cursor: "1",
+                node: {
+                  id: "user-2",
+                  __typename: "User",
+                },
+              },
+              {
+                cursor: "2",
+                node: {
+                  id: "user-3",
+                  __typename: "User",
+                },
+              },
+            ],
+          },
+        },
+      },
+    });
+
+    queryMock.mockQuery({
+      name: "TestPrefetchablePaginationRefetchQuery",
+      variables: {
+        count: 2,
+        cursor: "2",
+        id: "user-1",
+      },
+      data: {
+        node: {
+          __typename: "User",
+          id: "user-1",
+          friendsConnection: {
+            pageInfo: {
+              endCursor: "4",
+              hasNextPage: false,
+              startCursor: "",
+              hasPreviousPage: false,
+            },
+            edges: [
+              {
+                cursor: "3",
+                node: {
+                  id: "user-4",
+                  __typename: "User",
+                },
+              },
+              {
+                cursor: "4",
+                node: {
+                  id: "user-5",
+                  __typename: "User",
+                },
+              },
+            ],
+          },
+        },
+      },
+    });
+
+    t.render(test_prefetchablePagination());
+    await t.screen.findByText("user-2, user-3");
+
+    ReactTestUtils.act(() => {
+      t.fireEvent.click(t.screen.getByText("Load more"));
+    });
+
+    await t.screen.findByText("user-2, user-3, user-4, user-5");
+  });
+});

packages/rescript-relay/__tests__/Test_prefetchablePagination.res

@@ -0,0 +1,67 @@
+module Query = %relay(`
+  query TestPrefetchablePaginationQuery {
+    loggedInUser {
+      ...TestPrefetchablePagination_user
+    }
+  }
+`)
+
+module Fragment = %relay(`
+    fragment TestPrefetchablePagination_user on User
+      @refetchable(queryName: "TestPrefetchablePaginationRefetchQuery")
+      @argumentDefinitions(
+        count: { type: "Int", defaultValue: 2 }
+        cursor: { type: "String" }
+      ) {
+      friendsConnection(
+        first: $count
+        after: $cursor
+      ) @connection(key: "TestPrefetchablePagination_friendsConnection", prefetchable_pagination: true) {
+        edges {
+          node {
+            id
+          }
+        }
+      }
+    }
+`)
+
+module Test = {
+  @react.component
+  let make = () => {
+    let query = Query.use(~variables=())
+    let {edges, hasNext, isLoadingNext, loadNext} = Fragment.usePrefetchableForwardPagination(
+      query.loggedInUser.fragmentRefs,
+      ~bufferSize=2,
+    )
+
+    <div>
+      <div>
+        {edges
+        ->Belt.Array.keepMap(({node}) => node)
+        ->Belt.Array.map(friend => friend.id)
+        ->Js.Array2.joinWith(", ")
+        ->React.string}
+      </div>
+      {hasNext
+        ? <button onClick={_ => loadNext(~count=2)->RescriptRelay.Disposable.ignore}>
+            {React.string(isLoadingNext ? "Loading..." : "Load more")}
+          </button>
+        : React.null}
+    </div>
+  }
+}
+
+@live
+let test_prefetchablePagination = () => {
+  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>
+}