Skip to content
This repository has been archived by the owner on Apr 13, 2023. It is now read-only.

Use standby fetchPolicy for recycled queries #671

Merged
merged 7 commits into from May 3, 2017
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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions Changelog.md
Expand Up @@ -3,6 +3,7 @@
Expect active development and potentially significant breaking changes in the `0.x` track. We'll try to be diligent about releasing a `1.0` version in a timely fashion (ideally within 1 or 2 months), so that we can take advantage of SemVer to signify breaking changes from that point on.

### vNext
- Fix: Use `standby` fetchPolicy for recycled queries [PR #671](https://github.com/apollographql/react-apollo/pull/671)

### 1.1.3
- Perf: Removed unneeded usage of shouldComponentUpdate [PR #661](https://github.com/apollographql/react-apollo/pull/661) inspired by [PR #653](https://github.com/apollographql/react-apollo/pull/653)
Expand Down
2 changes: 1 addition & 1 deletion package.json
Expand Up @@ -129,7 +129,7 @@
"uglify-js": "^2.6.2"
},
"dependencies": {
"apollo-client": "^1.0.2",
"apollo-client": "^1.1.2",
"graphql-anywhere": "^3.0.0",
"graphql-tag": "^2.0.0",
"hoist-non-react-statics": "^1.2.0",
Expand Down
2 changes: 1 addition & 1 deletion src/graphql.tsx
Expand Up @@ -641,7 +641,7 @@ class ObservableQueryRecycler {
// Stop the query from polling when we recycle. Polling may resume when we
// reuse it and call `setOptions`.
observableQuery.setOptions({
fetchPolicy: 'cache-only',
fetchPolicy: 'standby',
pollInterval: 0,
});

Expand Down
137 changes: 137 additions & 0 deletions test/react-web/client/graphql/mutations.test.tsx
Expand Up @@ -627,4 +627,141 @@ describe('mutations', () => {
}, 5);
}));

it('will run `refetchQueries` for a recycled queries', () => new Promise((resolve, reject) => {
const mutation = gql`
mutation createTodo {
createTodo { id, text, completed }
}
`;

const mutationData = {
createTodo: {
id: '99',
text: 'This one was created with a mutation.',
completed: true,
},
};

const query = gql`
query todos($id: ID!) {
todo_list(id: $id) {
id, title, tasks { id, text, completed }
}
}
`;

const data = {
todo_list: { id: '123', title: 'how to apollo', tasks: [] },
};

const updatedData = {
todo_list: { id: '123', title: 'how to apollo', tasks: [mutationData.createTodo] },
};

const networkInterface = mockNetworkInterface(
{ request: { query, variables: { id: '123' } }, result: { data } },
{ request: { query: mutation }, result: { data: mutationData } },
{
request: { query, variables: { id: '123' } },
result: { data: updatedData }
},
);
const client = new ApolloClient({ networkInterface, addTypename: false });

let mutate;

@graphql(mutation, {})
class Mutation extends React.Component<any, any> {
componentDidMount () {
mutate = this.props.mutate;
}

render () {
return null;
}
}

let queryMountCount = 0;
let queryUnmountCount = 0;
let queryRenderCount = 0;

@graphql(query)
class Query extends React.Component<any, any> {
componentWillMount () {
queryMountCount++;
}

componentWillUnmount () {
queryUnmountCount++;
}

render () {
try {
switch (queryRenderCount++) {
case 0:
expect(this.props.data.loading).toBe(true);
expect(this.props.data.todo_list).toBeFalsy();
break;
case 1:
expect(this.props.data.loading).toBe(false);
expect(this.props.data.todo_list).toEqual({
id: '123',
title: 'how to apollo',
tasks: [],
});
break;
case 2:
expect(queryMountCount).toBe(2);
expect(queryUnmountCount).toBe(1);
expect(this.props.data.todo_list).toEqual(updatedData.todo_list);
break;
case 3:
expect(queryMountCount).toBe(2);
expect(queryUnmountCount).toBe(1);
expect(this.props.data.todo_list).toEqual(updatedData.todo_list);
break;
default:
throw new Error('Rendered too many times');
}
} catch (error) {
reject(error);
}
return null;
}
}

const wrapperMutation = renderer.create(
<ApolloProvider client={client}>
<Mutation/>
</ApolloProvider>
);

const wrapperQuery1 = renderer.create(
<ApolloProvider client={client}>
<Query id="123"/>
</ApolloProvider>
);

setTimeout(() => {
wrapperQuery1.unmount();

mutate({ refetchQueries: ['todos'] })
.then((...args) => {
setTimeout(() => {
// This re-renders the recycled query that should have been refetched while recycled.
const wrapperQuery2 = renderer.create(
<ApolloProvider client={client}>
<Query id="123"/>
</ApolloProvider>
);
resolve();
}, 5);
})
.catch((error) => {
reject(error);
throw error;
});
}, 5);
}));

});