How do you dynamically control react apollo-client query initiation?

Question

A react component wrapped with an apollo-client query will automatically initiate a call to the server for data.

I would like to fire off a request for data only on a specific user input.

You can pass the skip option in the query options - but this means the refetch() function is not provided as a prop to the component; and it appears that the value of skip is not assessed dynamically on prop update.

My use is case is a map component. I only want data for markers to be loaded when the user presses a button, but not on initial component mount or location change.

A code sample below:

// GraphQL wrapping
Explore = graphql(RoutesWithinQuery, {
  options: ({ displayedMapRegion }) => ({
    variables: {
      scope: 'WITHIN',
      targetRegion: mapRegionToGeoRegionInputType(displayedMapRegion)
    },
    skip: ({ targetResource, searchIsAllowedForMapArea }) => {
      const skip = Boolean(!searchIsAllowedForMapArea || targetResource != 'ROUTE');
      return skip;
    },
  }),
  props: ({ ownProps, data: { loading, viewer, refetch }}) => ({
    routes: viewer && viewer.routes ? viewer.routes : [],
    refetch,
    loading
  })
})(Explore);

Answer 1

To include an HoC based on a condition affected by a props change, you could use branch from recompose.

branch(
  test: (props: Object) => boolean,
  left: HigherOrderComponent,
  right: ?HigherOrderComponent
): HigherOrderComponent

check: https://github.com/acdlite/recompose/blob/master/docs/API.md#branch

For this specific example, would look something like:

const enhance = compose(
  branch(

    // evaluate condition

    ({ targetResource, searchIsAllowedForMapArea }) =>
      Boolean(!searchIsAllowedForMapArea || targetResource != 'ROUTE'),

    // HoC if condition is true

    graphql(RoutesWithinQuery, {
      options: ({ displayedMapRegion }) => ({
        variables: {
          scope: 'WITHIN',
          targetRegion: mapRegionToGeoRegionInputType(displayedMapRegion)
        },
      }),
      props: ({ ownProps, data: { loading, viewer, refetch } }) => ({
        routes: viewer && viewer.routes ? viewer.routes : [],
        refetch,
        loading
      })
    })
  )
);

Explore = enhance(Explore);