Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# master

- fix remove-unused-fields command. https://github.com/zth/rescript-relay/pull/636
- Fix `useRefetchableFragment` and `usePaginationFragment` to be compatible with `fromData`.

# 4.5.1

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down Expand Up @@ -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");
});
});
45 changes: 45 additions & 0 deletions packages/rescript-relay/__tests__/Test_paginationInNode.res
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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>
}
7 changes: 6 additions & 1 deletion packages/rescript-relay/__tests__/Test_refetching-tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const React = require("react");
const queryMock = require("./queryMock");
const ReactTestUtils = require("react-dom/test-utils");

const { test_refetching } = require("./Test_refetching.bs");
const { test_refetching, test_refetchable_component } = require("./Test_refetching.bs");

describe("Fragment", () => {
test("refetching works", async () => {
Expand Down Expand Up @@ -70,4 +70,9 @@ describe("Fragment", () => {
await t.screen.findByText("First is online");
await t.screen.findByText("Friends: 10");
});

test("useRefetchable supports `fromData`", async () => {
t.render(test_refetchable_component());
await t.screen.findByText("Test Data has 3 friends");
});
});
28 changes: 28 additions & 0 deletions packages/rescript-relay/__tests__/Test_refetching.res
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,18 @@ module Test = {
}
}

module RefetchableComponent = {
@react.component
let make = (~user) => {
let (data, _refetch) = Fragment.useRefetchable(user)
<div>
{React.string(
`${data.firstName} has ${data.friendsConnection.totalCount->Int.toString} friends`,
)}
</div>
}
}

@live
let test_refetching = () => {
let network = RescriptRelay.Network.makePromiseBased(~fetchFunction=RelayEnv.fetchQuery)
Expand All @@ -96,3 +108,19 @@ let test_refetching = () => {
<Test />
</TestProviders.Wrapper>
}

@live
let test_refetchable_component = () => {
let environment = RescriptRelay_Test.createMockEnvironment()
<TestProviders.Wrapper environment>
<RefetchableComponent
user={Fragment.Test.fromData({
id: "test-data-user-1",
firstName: "Test Data",
onlineStatus: Some(Online),
friendsConnection: {totalCount: 3},
friends: [{id: "friend-1"}],
})}
/>
</TestProviders.Wrapper>
}
144 changes: 94 additions & 50 deletions packages/rescript-relay/src/RescriptRelay_Fragment.res
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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]),
}
}
}

Expand Down Expand Up @@ -267,22 +307,26 @@ let useRefetchableFragment = (
~convertRefetchVariables: 'refetchVariables => 'refetchVariables,
~fRef,
) => {
let (fragmentData, refetchFn) = useRefetchableFragment_(node, fRef)
let data = RescriptRelay_Internal.internal_useConvertedValue(convertFragment, fragmentData)
(
data,
React.useMemo1(
() =>
(~variables: 'refetchVariables, ~fetchPolicy=?, ~onComplete=?) =>
refetchFn(
RescriptRelay_Internal.internal_removeUndefinedAndConvertNullsRaw(
variables->convertRefetchVariables,
)->RescriptRelay_Internal.internal_cleanObjectFromUndefinedRaw,
internal_makeRefetchableFnOpts(~fetchPolicy?, ~onComplete?, ()),
),
[refetchFn],
),
)
switch RescriptRelay_TestFragmentRef.getDataForNode(node, fRef) {
| Some(data) => (data, internal_noopRefetch)
| None =>
let (fragmentData, refetchFn) = useRefetchableFragment_(node, fRef)
let data = RescriptRelay_Internal.internal_useConvertedValue(convertFragment, fragmentData)
(
data,
React.useMemo1(
() =>
(~variables: 'refetchVariables, ~fetchPolicy=?, ~onComplete=?) =>
refetchFn(
RescriptRelay_Internal.internal_removeUndefinedAndConvertNullsRaw(
variables->convertRefetchVariables,
)->RescriptRelay_Internal.internal_cleanObjectFromUndefinedRaw,
internal_makeRefetchableFnOpts(~fetchPolicy?, ~onComplete?, ()),
),
[refetchFn],
),
)
}
}

@module("relay-runtime/experimental")
Expand Down
Loading