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

Posted 2023-03-10

【中文标题】将 refetchQueries 与 apollo 一起使用并做出反应

【英文标题】：Using refetchQueries with apollo and react

【发布时间】：2018-04-28 07:46:34

【问题描述】：

我无法让refetchQueries 工作。

我有一个“添加事物”的表单，但是当我导航回“事物列表”时 - 新创建的事物仅在我刷新页面时出现。 所以（作为中间步骤）我还希望它在成功“添加”后更新事物列表。

我尝试了以下方法，但它不起作用。 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",

【参考方案1】：

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

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