React-apollo: How to skip querying

Created on 6 Sep 2016  路  6Comments  路  Source: apollographql/react-apollo

Hi,
Is there a way to skip fetching data by defining an option?

@graphql(gql`
  query getItem {
    item {
      id, name
    }
  }
`, {
  options: ({ routeParams }) => ({
    skip: !routeParams.id
  }),
})

I'm aware of the skip decorator, but it will only evaluate on the server, thus a query is still sent.

@graphql(gql`
  query getItem($skip: Boolean!) {
    item @skip(if: $skip) {
      id, name
    }
  }
`, {
  options: ({ routeParams }) => ({
    variables: {
      skip: !routeParams,
    }
  }),
})

Use case would be a detail view, that if not provided with an ID, would skip querying and just use an empty (new) object to save the form state.

Most helpful comment

@jbaxleyiii what if I want to skip it initially, but load the query after a button is pressed? Skipping completely removes it, so I can't refetch

All 6 comments

@bkniffler this actually already exists just the way you wrote it out! http://dev.apollodata.com/react/queries.html#other-graphql-options

Hey, I'm very sorry! I thought I had checked the whole docs, but I must have missed this part.. thanks for the hint!

@jbaxleyiii what if I want to skip it initially, but load the query after a button is pressed? Skipping completely removes it, so I can't refetch

Yes, I completely agree. I find the word "skip" confusing, since I intuitively thought its related to the query, but in fact it skips the whole HOC functionality, so deactivate=true or something like that would make more sense, while skip=true could just skip querying (analog to the skip functionality in graphQL/relay). It just feels really wierd to use the cache-only policy whenever I want to skip querying.

This has been bothering me for quite some time, I really hope that this gets a revisit.

@bkniffler @zackify Yes, I have same issue.

I'm building a module that will fetch user information initially. but it has to synchronize with the store. So I have to skip initial query and resend the query in componentDidMount and I can access dispatch method.

But actully, the skip is not what I want. And I look up source code, no fetcherQueue can be set.

Follow the guide here: Skip graphql query conditionally

Was this page helpful?
0 / 5 - 0 ratings