Skip to content
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.

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

Ensure last results are reset when working with partial data #6417

Merged
merged 1 commit into from
Jun 10, 2020
Merged
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
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
{
"name": "apollo-client",
"path": "./dist/apollo-client.cjs.min.js",
"maxSize": "24.1 kB"
"maxSize": "24.2 kB"
}
],
"peerDependencies": {
Expand Down
4 changes: 3 additions & 1 deletion src/core/ObservableQuery.ts
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,9 @@ export class ObservableQuery<
}
}

if (!partial) {
if (partial) {
this.resetLastResults();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I comment out this line, the test fails as it should, but the test failures appear to be associated with a different test, unless I change the itAsync to itAsync.only.

I'm not sure if this is a limitation in Jest or the React component testing approach we're using for these tests, but it seems like something we should address eventually, to prevent confusion when tests fail.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @benjamn, I agree. I just ran a few quick tests with the latest version of @testing-library/react (which is 1 major version greater than the version we're using), and it looks like this issue disappeared. There are a few other failures after upgrading though, so I'll get this PR in place, then look into opening a separate PR to address the @testing-library/react upgrade.

} else {
this.updateLastResult(result);
}

Expand Down
91 changes: 91 additions & 0 deletions src/react/hooks/__tests__/useQuery.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -380,6 +380,97 @@ describe('useQuery Hook', () => {
console.error = consoleError;
}).then(resolve, reject);
});

itAsync('should update with proper loading state when variables change for cached queries', (resolve, reject) => {
const peopleQuery = gql`
query AllPeople($search: String!) {
people(search: $search) {
id
name
}
}
`;

const peopleData = {
people: [
{ id: 1, name: "John Smith" },
{ id: 2, name: "Sara Smith" },
{ id: 3, name: "Budd Deey" }
]
};

const mocks = [
{
request: { query: peopleQuery, variables: { search: '' } },
result: { data: peopleData },
},
{
request: { query: peopleQuery, variables: { search: 'z' } },
result: { data: { people: [] } },
},
{
request: { query: peopleQuery, variables: { search: 'zz' } },
result: { data: { people: [] } },
},
];

let renderCount = 0;
const Component = () => {
const [search, setSearch] = useState('');
const { loading, data } = useQuery(peopleQuery, {
variables: {
search: search
}
});
switch (++renderCount) {
case 1:
expect(loading).toBeTruthy();
break;
case 2:
expect(loading).toBeFalsy();
expect(data).toEqual(peopleData);
setTimeout(() => setSearch('z'));
break;
case 3:
expect(loading).toBeTruthy();
break;
case 4:
expect(loading).toBeFalsy();
expect(data).toEqual({ people: [] });
setTimeout(() => setSearch(''));
break;
case 5:
expect(loading).toBeFalsy();
expect(data).toEqual(peopleData);
setTimeout(() => setSearch('z'));
break;
case 6:
expect(loading).toBeFalsy();
expect(data).toEqual({ people: [] });
setTimeout(() => setSearch('zz'));
break;
case 7:
expect(loading).toBeTruthy();
break;
case 8:
expect(loading).toBeFalsy();
expect(data).toEqual({ people: [] });
break;
default:
}
return null;
}

render(
<MockedProvider mocks={mocks}>
<Component />
</MockedProvider>
);

return wait(() => {
expect(renderCount).toBe(8);
}).then(resolve, reject);
});
});

describe('Polling', () => {
Expand Down