Skip to content

Commit

Permalink
Merge pull request #241 from relay-tools/issue-238-render
Browse files Browse the repository at this point in the history 
[proposal] improve rendering for query without incremental data
  • Loading branch information
@morrys
morrys authored May 12, 2023
2 parents 2cb5ae0 + 6ebc4db commit 3894bb0
Show file tree
Hide file tree
Showing 26 changed files with 866 additions and 891 deletions.
36 changes: 8 additions & 28 deletions __tests__/ReactRelayFragmentContainer-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,16 @@

import * as React from 'react';
import * as ReactTestRenderer from 'react-test-renderer';
import {
useQuery,
useFragment,
RelayEnvironmentProvider,
useRelayEnvironment,
NETWORK_ONLY,
} from '../src';
import { useQuery, useFragment, RelayEnvironmentProvider, useRelayEnvironment, NETWORK_ONLY } from '../src';

function createHooks(component, options?: any) {
const result = ReactTestRenderer.create(component, options);
let result;
ReactTestRenderer.act(() => {
result = ReactTestRenderer.create(component, options);
jest.runAllImmediates();
});
return result;
}

const ReactRelayFragmentContainer = {
createContainer: (Component, spec) => (props) => {
const { user, ...others } = props;
Expand Down Expand Up @@ -127,18 +121,15 @@ describe('ReactRelayFragmentContainer', () => {
`;

UserQueryWithCond = graphql`
query ReactRelayFragmentContainerTestUserWithCondQuery(
$id: ID!
$condGlobal: Boolean!
) {
query ReactRelayFragmentContainerTestUserWithCondQuery($id: ID!, $condGlobal: Boolean!) {
node(id: $id) {
...ReactRelayFragmentContainerTestUserFragment @arguments(cond: $condGlobal)
}
}
`;
UserFragment = graphql`
fragment ReactRelayFragmentContainerTestUserFragment on User
@argumentDefinitions(cond: { type: "Boolean!", defaultValue: true }) {
@argumentDefinitions(cond: { type: "Boolean!", defaultValue: true }) {
id
name @include(if: $cond)
}
Expand Down Expand Up @@ -338,12 +329,7 @@ describe('ReactRelayFragmentContainer', () => {
missingClientEdges: null,
missingRequiredFields: null,
seenRecords: expect.any(Object),
selector: createReaderSelector(
UserFragment,
'842472',
{ cond: true },
ownerUser2.request,
),
selector: createReaderSelector(UserFragment, '842472', { cond: true }, ownerUser2.request),
});
});

Expand All @@ -358,8 +344,7 @@ describe('ReactRelayFragmentContainer', () => {
environment.lookup.mockClear();
environment.subscribe.mockClear();

userPointer = environment.lookup(ownerUser1WithCondVar.fragment, ownerUser1WithCondVar).data
.node;
userPointer = environment.lookup(ownerUser1WithCondVar.fragment, ownerUser1WithCondVar).data.node;
instance.getInstance().setProps({
user: userPointer,
});
Expand Down Expand Up @@ -389,12 +374,7 @@ describe('ReactRelayFragmentContainer', () => {
missingClientEdges: null,
missingRequiredFields: null,
seenRecords: expect.any(Object),
selector: createReaderSelector(
UserFragment,
'4',
{ cond: false },
ownerUser1WithCondVar.request,
),
selector: createReaderSelector(UserFragment, '4', { cond: false }, ownerUser1WithCondVar.request),
});
});

Expand Down
82 changes: 35 additions & 47 deletions __tests__/ReactRelayPaginationContainer-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,9 @@ import { usePagination, RelayEnvironmentProvider, useRelayEnvironment } from '..
import { forceCache } from '../src/Utils';

function createHooks(component, options?: any) {
const result = ReactTestRenderer.create(component, options);
let result;
ReactTestRenderer.act(() => {
result = ReactTestRenderer.create(component, options);
jest.runAllImmediates();
});
return result;
Expand Down Expand Up @@ -165,18 +166,14 @@ describe('ReactRelayPaginationContainer', () => {

UserFragment = graphql`
fragment ReactRelayPaginationContainerTestUserFragment on User
@refetchable(queryName: "ReactRelayPaginationContainerUserFragmentRefetchQuery")
@argumentDefinitions(
isViewerFriendLocal: { type: "Boolean", defaultValue: false }
orderby: { type: "[String]" }
) {
@refetchable(queryName: "ReactRelayPaginationContainerUserFragmentRefetchQuery")
@argumentDefinitions(
isViewerFriendLocal: { type: "Boolean", defaultValue: false }
orderby: { type: "[String]" }
) {
id
friends(
after: $after
first: $count
orderby: $orderby
isViewerFriend: $isViewerFriendLocal
) @connection(key: "UserFragment_friends") {
friends(after: $after, first: $count, orderby: $orderby, isViewerFriend: $isViewerFriendLocal)
@connection(key: "UserFragment_friends") {
edges {
node {
id
Expand Down Expand Up @@ -533,8 +530,7 @@ describe('ReactRelayPaginationContainer', () => {
environment.lookup.mockClear();
environment.subscribe.mockClear();

userPointer = environment.lookup(ownerUser1WithOtherVar.fragment, ownerUser1WithOtherVar)
.data.node;
userPointer = environment.lookup(ownerUser1WithOtherVar.fragment, ownerUser1WithOtherVar).data.node;
instance.getInstance().setProps({
user: userPointer,
});
Expand Down Expand Up @@ -637,8 +633,7 @@ describe('ReactRelayPaginationContainer', () => {
environment.subscribe.mockClear();

// Pass an updated user pointer that references different variables
userPointer = environment.lookup(ownerUser1WithOtherVar.fragment, ownerUser1WithOtherVar)
.data.node;
userPointer = environment.lookup(ownerUser1WithOtherVar.fragment, ownerUser1WithOtherVar).data.node;
instance.getInstance().setProps({
user: userPointer,
});
Expand Down Expand Up @@ -909,11 +904,8 @@ describe('ReactRelayPaginationContainer', () => {
`;
UserFragment = graphql`
fragment ReactRelayPaginationContainerTestNoConnectionOnFragmentUserFragment on User
@refetchable(
queryName: "ReactRelayPaginationContainerTestNoConnectionUserFragmentRefetchQuery"
) {
friends(after: $after, first: $count, orderby: $orderby)
@connection(key: "UserFragment_friends") {
@refetchable(queryName: "ReactRelayPaginationContainerTestNoConnectionUserFragmentRefetchQuery") {
friends(after: $after, first: $count, orderby: $orderby) @connection(key: "UserFragment_friends") {
edges {
node {
id
Expand Down Expand Up @@ -1129,11 +1121,14 @@ describe('ReactRelayPaginationContainer', () => {

it('updates after pagination (if more results)', () => {
const userPointer = environment.lookup(ownerUser1.fragment, ownerUser1).data.node;
ReactTestRenderer.create(
<ContextSetter environment={environment}>
<TestContainer user={userPointer} />
</ContextSetter>,
);
ReactTestRenderer.act(() => {
ReactTestRenderer.create(
<ContextSetter environment={environment}>
<TestContainer user={userPointer} />
</ContextSetter>,
);
jest.runAllImmediates();
});
expect(render.mock.calls.length).toBe(1);
expect(render.mock.calls[0][0].user.friends.edges.length).toBe(1);

Expand Down Expand Up @@ -1168,20 +1163,21 @@ describe('ReactRelayPaginationContainer', () => {
expect(render.mock.calls.length).toBe(3);
expect(render.mock.calls[0][0].user.friends.edges.length).toBe(1);
expect(render.mock.calls[0][0].relay.isLoadingNext).toBe(true);
expect(render.mock.calls[1][0].user.friends.edges.length).toBe(2);
expect(render.mock.calls[1][0].relay.isLoadingNext).toBe(true);
expect(render.mock.calls[2][0].user.friends.edges.length).toBe(2);
expect(render.mock.calls[2][0].relay.isLoadingNext).toBe(false);
expect(render.mock.calls[2][0].relay.hasMore).toBe(true);
});

it('updates after pagination (if no more results)', () => {
const userPointer = environment.lookup(ownerUser1.fragment, ownerUser1).data.node;
ReactTestRenderer.create(
<ContextSetter environment={environment}>
<TestContainer user={userPointer} />
</ContextSetter>,
);
ReactTestRenderer.act(() => {
ReactTestRenderer.create(
<ContextSetter environment={environment}>
<TestContainer user={userPointer} />
</ContextSetter>,
);
jest.runAllImmediates();
});
expect(render.mock.calls.length).toBe(1);
expect(render.mock.calls[0][0].user.friends.edges.length).toBe(1);

Expand Down Expand Up @@ -1216,8 +1212,6 @@ describe('ReactRelayPaginationContainer', () => {
expect(render.mock.calls.length).toBe(3);
expect(render.mock.calls[0][0].user.friends.edges.length).toBe(1);
expect(render.mock.calls[0][0].relay.isLoadingNext).toBe(true);
expect(render.mock.calls[1][0].user.friends.edges.length).toBe(2);
expect(render.mock.calls[1][0].relay.isLoadingNext).toBe(true);
expect(render.mock.calls[2][0].user.friends.edges.length).toBe(2);
expect(render.mock.calls[2][0].relay.isLoadingNext).toBe(false);
expect(render.mock.calls[2][0].relay.hasMore).toBe(false);
Expand Down Expand Up @@ -1402,9 +1396,7 @@ describe('ReactRelayPaginationContainer', () => {
isViewerFriendLocal: false,
};
loadMore(1, jest.fn());
expect(
environment.mock.isLoading(UserFragmentRefetchQuery, variables, forceCache),
).toBe(true);
expect(environment.mock.isLoading(UserFragmentRefetchQuery, variables, forceCache)).toBe(true);
});

it('calls the callback when the fetch succeeds', () => {
Expand Down Expand Up @@ -1611,9 +1603,7 @@ describe('ReactRelayPaginationContainer', () => {
isViewerFriendLocal: false,
};
refetchConnection(1, jest.fn());
expect(
environment.mock.isLoading(UserFragmentRefetchQuery, variables, forceCache),
).toBe(true);
expect(environment.mock.isLoading(UserFragmentRefetchQuery, variables, forceCache)).toBe(true);
});

it('calls the callback when the fetch succeeds', () => {
Expand Down Expand Up @@ -1867,9 +1857,9 @@ describe('ReactRelayPaginationContainer', () => {
});
expect(references.length).toBe(1);
expect(references[0].dispose).not.toBeCalled();
expect(render.mock.calls.length).toBe(4);
expect(render.mock.calls[3][0].user.friends.edges.length).toBe(1);
expect(render.mock.calls[3][0]).toEqual({
expect(render.mock.calls.length).toBe(3);
expect(render.mock.calls[2][0].user.friends.edges.length).toBe(1);
expect(render.mock.calls[2][0]).toEqual({
user: {
id: '4',
friends: {
Expand Down Expand Up @@ -1937,9 +1927,7 @@ describe('ReactRelayPaginationContainer', () => {
isViewerFriendLocal: true,
id: '4',
};
expect(
environment.mock.isLoading(UserFragmentRefetchQuery, variables, forceCache),
).toBe(true);
expect(environment.mock.isLoading(UserFragmentRefetchQuery, variables, forceCache)).toBe(true);
});

it('should not refetch connection if container is unmounted', () => {
Expand Down
Loading

0 comments on commit 3894bb0

Please sign in to comment.