将 refetchQueries 与 apollo 一起使用并做出反应

Question

我无法让 refetchQueries 工作。

我有一个 "Adds a thing" 的表单，但是当我导航回 "list of things" 时 - 新创建的东西只会在我刷新页面时出现。所以（作为中间步骤）我也希望它在成功 "add".

之后更新事物列表

我尝试了以下方法，但它不起作用。 docs 非常简单，所以我觉得我一定遗漏了一些简单的东西：

  // 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
  );

相关部门：

"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",

Answer 1

refetchQueries 应该是传递给 graphql HOC 的 options 对象上的属性：

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

将 refetchQueries 与 apollo 一起使用并做出反应

Using refetchQueries with apollo and react

apollo

reactjs

react-apollo