Using refetchQueries with apollo and react

Question

I'm having trouble getting refetchQueries to work.

I have a form which "Adds a thing", but when I navigate back to the "list of things" - the newly created thing only appears when I refresh the page. So (as an intermediate step) I'd also like it to update the list of things after a successful "add".

I tried the following but it doesn't work. The docs are quite simple, so I'm feel like I must be missing something simple:

  // Called successfully
  const updateThing = gql`
  mutation AddThing($id: ID, $title: String!) {
    problem(id: $id, title: $title) {
      id
      title
    }
  }

  // NOT CALLED :(
  const listThings = gql`
  query ListThings($includeArchived: Boolean = false) {
    problems(includeArchived: $includeArchived) {
      id,
      archived
    }
  }

  // Form (simplified version of Formik form)
  const ThingForm = props => (
    <form onSubmit={e=> {
      e.preventDefault();
      e.handleSave({
        variables: {
          title: 'test'
        }
      })
    }}
    >
      <button type="submit">Add thing</button>
    </form>
  )

  // Connect
  export const ThingAdd = compose(
    graphql(
      updateThing,
      {
        name: 'handleSave',
        options: ({values}) => ({...values }),
        refetchQueries: [{
          query: listThing,
          variables: ({includeArchived: true})
        }]
      }
    )
  )(
    ThingForm
  );

The relevant deps:

"apollo-cache-inmemory": "^1.1.0",
"apollo-client": "^2.0.2",
"apollo-fetch": "^0.6.0",
"apollo-link-core": "^0.5.4",
"apollo-link-http": "^1.1.0",
"graphql": "0.10.5",
"graphql-tag": "^2.5.0",
"graphql-tools": "^2.7.2",
"react": "^16.0.0",
"react-apollo": "^2.0.0",

Daniel Rearden Daniel Rearden · Accepted Answer · 2017-11-15T12:17:28

refetchQueries should be a property on the options object you pass to the graphql HOC:

options: ({values}) => ({
  refetchQueries: [{
    query: listThing,
    variables: ({includeArchived: true})
  }],
  ...values
}),

Using refetchQueries with apollo and react

1 Answers