How to skip initial Apollo query and fetch data on button click? - redux

Question

I have a container in my React / Redux app with multiple mutations and a query:
const MenuWithData = compose(
graphql(GET_FINAL_CODE_BY_PROJECT_ID, {
options: ownProps => ({
variables: {
id: ownProps.projectId,
},
skip: true,
}),
props: ({ data }) => data,
}),
graphql(DELETE_PROJECT, {
props: ({ ownProps, mutate }) => ({
async deleteProject() {
// ...
},
}),
}),
)(Menu);
export default connect(
state: ({
projectId: state.current.projectId,
}),
dispatch => ({
deleteProject(id) {
dispatch(deleteProject(id));
},
})
)(MenuWithData);
The container sends the deleteProject function through the props to the <Menu> component and I call it when a user clicks on the "Delete" button.
I'm trying to do the same thing with the query, but I can't seem to find a way to send it to the component. If I use skip: true, I don't have access to the refetch method, but if I set it to false, then the query executes on load.
Is there a way to execute Apollo queries on events that happen in the component?

Answer 1

You should utilize the withApollo HOC instead of graphql:
const MenuWithData = compose(
withApollo,
graphql(DELETE_PROJECT, {
props: ({ ownProps, mutate }) => ({
async deleteProject() {
// ...
},
}),
}),
)(Menu);
This will pass your client instance down to the component, so you can do something like this inside your button's click handler:
props.client.query({
query: GET_FINAL_CODE_BY_PROJECT_ID,
variables: { id: props.projectId },
}).then(({ data, errors }) => {
// handle result
})
FWIW, the convention is to never have queries mutate anything -- if calling a query is going to change data, it should be a mutation. Apollo is built around this idea, with the drastically different way queries and mutations are handled by the same HOC.
If you're not firing the query until a user does something, it sounds like your query is potentially mutating data, in which case it may be worth considering making it a mutation in the first place.