[useQuery] Skip the first fetch

[jgoux]

Hi,

I'm currently trying react-navi library as a routing solution (cc @jamesknelson).

It has an interesting approach in which you can provide a route's data before the route's component is rendered. (see getData here).

So the idea is to fetch the route's data first using directly apollo-client, and then to subscribe to eventual refetchs inside the component using useQuery.

My main issue is that when declaring useQuery inside the component, the query gets fired on mount. I'd like to skip this first query and only "subscribe for updates". Do you think it's possible with the current API? If not, would you consider adding an option to avoid the first fetch when declaring useQuery? Maybe adding a skipFirst option or allowing to pass initialData to useQuery so it doesn't fire a fetch but return the initialData instead?

My current code is like this :

export default route({
  title: "List of actions",
  getData: (_, { graphqlClient }) => graphqlClient.query(GET_ACTIONS),
  view: <ActionListPage />
})

function ActionListPage(props) {
  // the page receive props.data

  // here I only want "updates" to avoid the initial fetching that I already got from above
  let {
    data: { actions = [] },
    loading,
    error
  } = useQuery(GET_ACTIONS)
  // possible APIS : 
  // useQuery(GET_ACTIONS, {}, { initialData: props.data })
  // useQuery(GET_ACTIONS, {}, { skipFirst: true })

 // boring JSX...
}

[avocadowastaken]

It can be achieved with fetchPolicy option.

[StefanoSega]

@umidbekk could you please give us a working example? It would need a fetchPolicy that skips the first fetch and then you can use refetch to get the data, but I don't see any ...

[mlambley]

Incorrect. This is done with the skip option. In your case:

let {
    data: { actions = [] },
    loading,
    error
} = useQuery(GET_ACTIONS, {
    skip: true
})