Skip to content

[proposal] improve rendering for query without incremental data #241

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
morrys merged 24 commits into from
May 12, 2023
Merged

[proposal] improve rendering for query without incremental data #241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
b0ef86f
added forceUpdate skip by checking is_final
morrys Mar 14, 2023
4beaa71
Merge branch 'master' into issue-238-render
morrys Mar 28, 2023
07170b8
fix eslint
morrys Mar 28, 2023
a617bbd
is_final server
morrys Mar 28, 2023
3d8f27b
revert is_final and added hasNext
morrys Mar 31, 2023
2d1fe26
Update server.js
morrys Mar 31, 2023
589dff5
Update createRelayEnvironment.ts
morrys Mar 31, 2023
a300d32
fix poll query
morrys Mar 31, 2023
6667593
optimize fetch render in FragmentResolver
morrys Apr 3, 2023
b63a042
Update useRefetchableFragment-test.tsx
morrys Apr 3, 2023
ba2c8d7
Update FetchResolver.ts
morrys Apr 3, 2023
a1225ff
fix render for refetch
morrys Apr 3, 2023
b534aec
optimize subscribe fragment render
morrys Apr 4, 2023
65f4730
adapt example
morrys Apr 4, 2023
ffac4db
update tests
morrys Apr 4, 2023
a82fd1e
call forceupdate only when hooks is mounted
morrys Apr 5, 2023
b5d5add
version 8.0.0-rc.1
morrys Apr 5, 2023
0491955
Update package.json
morrys Apr 5, 2023
986e0e1
move refreshUpdate, useful for incremental data, as I don't update fr…
morrys Apr 5, 2023
675e3a0
version 8.0.0-rc.2
morrys Apr 5, 2023
6831a5a
fix query polling
morrys Apr 6, 2023
5695a87
added test for polling & version 8.0.0-rc.3
morrys Apr 6, 2023
a466689
refactor resolveUpdate & revert check is loading on fragmentresolver
morrys May 9, 2023
6ebc4db
version 8.0.0
morrys May 12, 2023
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
36 changes: 8 additions & 28 deletions __tests__/ReactRelayFragmentContainer-test.tsx
View file
Open in desktop
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
Open in desktop
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