Apollo graphql react hoc to pass query as prop function

Question

The graphql hoc from react apollo helps in hooking up a component with a query. So that the query will execute and the result will be available as prop in the component.

Is there a way to not execute the query directly but pass a function as prop to the function which can be executed as normal function call inside the component. becuase I have a query which need to be executed after user selects some options in the component.

eg

<Form>
 <Select onChange={(value) => getCorrespondingValues(value)" />
</Form>

function getCorrespondingValues(value){
   this.props.getValuesQuery(values)
}

this can be achieved with directly using apollo client. but is there anyway to use it with the help graphql hoc. so the component code doesn't have to change.

Oleg Kupriianov Oleg Kupriianov · Accepted Answer · 2019-12-24T17:41:13

const getValuesQueryHOC = graphql(YOUR_MUTATION, {
  props: ({ mutate }) => ({
    getValuesQuery: (values) =>
      mutate({
        variables: {
          values
        }
      })
  })
});
export default getValuesQueryHOC(YourComponent)

Apollo graphql react hoc to pass query as prop function

1 Answers