Fix usePaginationFragment/fromData incompatibility

Author: benjamin-thomas

CHANGELOG.md

@@ -1,7 +1,7 @@
 # master
 
 - fix remove-unused-fields command. https://github.com/zth/rescript-relay/pull/636
-- Fix `useRefetchableFragment` to be compatible with `fromData`.
+- Fix `useRefetchableFragment` and `usePaginationFragment` to be compatible with `fromData`.
 
 # 4.5.1
 

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

@@ -4,7 +4,7 @@ const ReactTestUtils = require("react-dom/test-utils");
 const React = require("react");
 const queryMock = require("./queryMock");
 
-const { test_pagination } = require("./Test_paginationInNode.bs");
+const { test_pagination, test_pagination_from_data } = require("./Test_paginationInNode.bs");
 
 describe("Pagination nested in node", () => {
   test("paginating works", async () => {
@@ -180,4 +180,9 @@ describe("Pagination nested in node", () => {
     await t.screen.findByText("User Second has 3 friends");
     expect(t.screen.queryByText("User First has 2 friends")).toBeFalsy();
   });
+
+  test("usePagination supports `fromData`", async () => {
+    t.render(test_pagination_from_data());
+    await t.screen.findByText("Test Data has 2 friends");
+  });
 });

packages/rescript-relay/__tests__/Test_paginationInNode.res

@@ -113,6 +113,15 @@ module Test = {
   }
 }
 
+module FromDataPaginationComponent = {
+  @react.component
+  let make = (~user) => {
+    let {data} = Fragment.usePagination(user)
+    let friendCount = data.friendsConnection->Fragment.getConnectionNodes->Array.length
+    <div> {React.string(`Test Data has ${friendCount->Int.toString} friends`)} </div>
+  }
+}
+
 @live
 let test_pagination = () => {
   let network = RescriptRelay.Network.makePromiseBased(~fetchFunction=RelayEnv.fetchQuery)
@@ -126,3 +135,39 @@ let test_pagination = () => {
     <Test />
   </TestProviders.Wrapper>
 }
+
+@live
+let test_pagination_from_data = () => {
+  let environment = RescriptRelay_Test.createMockEnvironment()
+  <TestProviders.Wrapper environment>
+    <FromDataPaginationComponent
+      user={Fragment.Test.fromData({
+        id: "test-data-user-1",
+        friendsConnection: {
+          edges: Some([
+            Some({
+              node: Some({
+                id: "friend-1",
+                fragmentRefs: UserFragment.Test.fromData({
+                  id: "friend-1",
+                  firstName: "Friend One",
+                  friendsConnection: {totalCount: 0},
+                }),
+              }),
+            }),
+            Some({
+              node: Some({
+                id: "friend-2",
+                fragmentRefs: UserFragment.Test.fromData({
+                  id: "friend-2",
+                  firstName: "Friend Two",
+                  friendsConnection: {totalCount: 0},
+                }),
+              }),
+            }),
+          ]),
+        },
+      })}
+    />
+  </TestProviders.Wrapper>
+}

packages/rescript-relay/src/RescriptRelay_Fragment.res

@@ -87,8 +87,35 @@ let internal_makeRefetchableFnOpts = (~fetchPolicy=?, ~onComplete=?, ()) => {
   onComplete: ?(onComplete->RescriptRelay_Internal.internal_nullableToOptionalExnHandler),
 }
 
+module InternalNoopDisposable = {
+  type t = {dispose: unit => unit}
+  external toOpaqueDisposable: t => Disposable.t = "%identity"
+  let noop = {dispose: () => ()}->toOpaqueDisposable
+}
+
+let internal_noopRefetch = (
+  ~variables as _,
+  ~fetchPolicy as _=?,
+  ~onComplete=?,
+) => {
+  switch onComplete {
+  | None => ()
+  | Some(complete) => complete(None)
+  }
+  InternalNoopDisposable.noop
+}
+
 type paginationLoadMoreOptions = {onComplete?: Nullable.t<JsExn.t> => unit}
 type paginationLoadMoreFn = (~count: int, ~onComplete: option<JsExn.t> => unit=?) => Disposable.t
+
+let internal_noopLoadMore = (~count as _, ~onComplete=?) => {
+  switch onComplete {
+  | None => ()
+  | Some(complete) => complete(None)
+  }
+  InternalNoopDisposable.noop
+}
+
 type paginationFragmentReturnRaw<'fragment, 'refetchVariables> = {
   data: 'fragment,
   loadNext: (int, paginationLoadMoreOptions) => Disposable.t,
@@ -127,40 +154,53 @@ let usePaginationFragment = (
   ~convertFragment: 'fragment => 'fragment,
   ~convertRefetchVariables: 'refetchVariables => 'refetchVariables,
 ) => {
-  let p = usePaginationFragment_(node, fRef)
-  let data = RescriptRelay_Internal.internal_useConvertedValue(convertFragment, p.data)
-  {
-    data,
-    loadNext: React.useMemo1(() =>
-      (~count, ~onComplete=?) => {
-        p.loadNext(
-          count,
-          {onComplete: ?(onComplete->RescriptRelay_Internal.internal_nullableToOptionalExnHandler)},
-        )
-      }
-    , [p.loadNext]),
-    loadPrevious: React.useMemo1(() =>
-      (~count, ~onComplete=?) => {
-        p.loadPrevious(
-          count,
-          {onComplete: ?(onComplete->RescriptRelay_Internal.internal_nullableToOptionalExnHandler)},
-        )
-      }
-    , [p.loadPrevious]),
-    hasNext: p.hasNext,
-    hasPrevious: p.hasPrevious,
-    isLoadingNext: p.isLoadingNext,
-    isLoadingPrevious: p.isLoadingPrevious,
-    refetch: React.useMemo1(() =>
-      (~variables, ~fetchPolicy=?, ~onComplete=?) => {
-        p.refetch(
-          RescriptRelay_Internal.internal_cleanObjectFromUndefinedRaw(
-            variables->convertRefetchVariables,
-          ),
-          internal_makeRefetchableFnOpts(~onComplete?, ~fetchPolicy?, ()),
-        )
-      }
-    , [p.refetch]),
+  switch RescriptRelay_TestFragmentRef.getDataForNode(node, fRef) {
+  | Some(data) => {
+      data,
+      loadNext: internal_noopLoadMore,
+      loadPrevious: internal_noopLoadMore,
+      hasNext: false,
+      hasPrevious: false,
+      isLoadingNext: false,
+      isLoadingPrevious: false,
+      refetch: internal_noopRefetch,
+    }
+  | None =>
+    let p = usePaginationFragment_(node, fRef)
+    let data = RescriptRelay_Internal.internal_useConvertedValue(convertFragment, p.data)
+    {
+      data,
+      loadNext: React.useMemo1(() =>
+        (~count, ~onComplete=?) => {
+          p.loadNext(
+            count,
+            {onComplete: ?(onComplete->RescriptRelay_Internal.internal_nullableToOptionalExnHandler)},
+          )
+        }
+      , [p.loadNext]),
+      loadPrevious: React.useMemo1(() =>
+        (~count, ~onComplete=?) => {
+          p.loadPrevious(
+            count,
+            {onComplete: ?(onComplete->RescriptRelay_Internal.internal_nullableToOptionalExnHandler)},
+          )
+        }
+      , [p.loadPrevious]),
+      hasNext: p.hasNext,
+      hasPrevious: p.hasPrevious,
+      isLoadingNext: p.isLoadingNext,
+      isLoadingPrevious: p.isLoadingPrevious,
+      refetch: React.useMemo1(() =>
+        (~variables, ~fetchPolicy=?, ~onComplete=?) => {
+          p.refetch(
+            RescriptRelay_Internal.internal_cleanObjectFromUndefinedRaw(
+              variables->convertRefetchVariables,
+            ),
+            internal_makeRefetchableFnOpts(~onComplete?, ~fetchPolicy?, ()),
+          )
+        }
+      , [p.refetch]),
+    }
   }
 }
 
@@ -250,23 +290,6 @@ external useRefetchableFragment_: (
   'fragmentRef,
 ) => ('fragment, ('refetchVariables, refetchableFnOpts) => Disposable.t) = "useRefetchableFragment"
 
-let internal_noopRefetch = (
-  ~variables as _,
-  ~fetchPolicy as _=?,
-  ~onComplete=?,
-) => {
-  module Disposable = {
-    type t = {dispose: unit => unit}
-    external toOpaqueDisposable: t => Disposable.t = "%identity"
-    let noop = { dispose : () => ()}->toOpaqueDisposable
-  }
-  switch onComplete {
-  | None => ()
-  | Some(complete) => complete(None)
-  }
-  Disposable.noop
-}
-
 /**React hook for using a fragment that you want to refetch. Returns \
              a tuple of `(fragmentData, refetchFn)`.\n\n\
              ### Refetching and variables\n\