React-apollo: [2.1] Prop to skip execution in <Query/> component

Created on 1 Feb 2018  路  7Comments  路  Source: apollographql/react-apollo

Use case:

  • you have an optional query, which should only be executed under certain scenarios
  • you also have children inside the component which should be rendered statically, for every scenario.

Workaround: I currently choose to avoid rendering the component altogether, but this changes the tree structure, which makes children unmount and re-mount again. Also thought of passing a null gql to the query prop, but that throws an exception.

Proposal: add a skip prop to the component. When flagged, it should bypass the graphql call, but still execute the children render prop, to maintain the same virtual dom tree structure.

Most helpful comment

This feature should be available on 2.1.0-beta.3. Check out this PR for more info: https://github.com/apollographql/react-apollo/pull/1715

All 7 comments

@abenhamdine I'm referring to the new <Query/> component that uses render props, not the graphql container HOC (maybe I should make that clearer in the issue description).

AFAIK, the link you provided details the "skip" option for the later.

I'm referring to the new component that uses render props, not the graphql container HOC (maybe I should make that clearer in the issue description).

Oh yes, sorry, I realized after having posted that you were referring to the Query component.
Nethertheless, perhaps it would be useful to explain if your proposal is the equivalent (or not equivalent, and so why) of the HOC skip property, to be clearer for everyone.

I would also really appreciate a skip property that is equivalent to the HOC's skip property. ie, we should still render the underlying component (children here), but not execute the query.

I'm currently working around this by setting fetchPolicy={skip() ? 'cache-only' : undefined}

It's not a perfect recreation of the functionality, but it at least reduces the number of network requests which is a good portion of what I want.

I think this property would be useful, too.
In real world web apps you often need to skip queries for not-logged users to avoid useless not-authenticated errors.

Thank you,
Matteo

This feature should be available on 2.1.0-beta.3. Check out this PR for more info: https://github.com/apollographql/react-apollo/pull/1715

Was this page helpful?
0 / 5 - 0 ratings