如何从另一个组件重新获取 graphql 查询？

Posted 2023-03-08

【中文标题】如何从另一个组件重新获取 graphql 查询？

【英文标题】：How to refetch graphql query from another component?

【发布时间】：2020-03-30 21:02:31

【问题描述】：

我对 React 非常陌生，尤其是 graphql。

每次使用突变 createEvent 时，我都会尝试重新获取事件查询，因此包含所有事件的页面将自动更新，无需刷新。

但是，我找不到连接这两个查询的方法。

“form.jsx”文件中的我的突变创建事件：

  const body = 
    query:
      "mutation" +
      "createEvent(eventInput:num1:" +
      '"' +
      this.state.num1.toString() +
      '"' +
      ",num2:" +
      '"' +
      this.state.num2.toString() +
      '"' +
      ")" +
      "_id " +
      "num1 " +
      "num2 " +
      "addition " +
      "multiply" +
      ""
  ;
  fetch("https://localhost:8000/graphql", 
    method: "POST",
    body: JSON.stringify(body),
    headers: 
      "Content-Type": "application/json"
    
  )
    .then(res => 
      if (res.status !== 200 && res.status !== 201) 
        throw new Error("Failed!");
      
      return res.json();
    )
    .then(resData => 
      console.log(resData);
    )
    .catch(err => 
      console.log(err);
    );

这是我从“myTable.jsx”文件中查询的事件：

const body = 
  query:
    "query " +
    "events " +
    "_id " +
    "num1 " +
    "num2 " +
    "addition " +
    "multiply" +
    ""
;
//console.log(body);
fetch("https://localhost:8000/graphql", 
  method: "POST",
  body: JSON.stringify(body),
  headers: 
    "Content-Type": "application/json"
  
)
  .then(res => 
    if (res.status !== 200 && res.status !== 201) 
      throw new Error("Failed!");
    
    return res.json();
  )
  .then(resData => 
    const events = resData.data.events;
    this.setState( list: events );
  )
  .catch(err => 
    console.log(err);
  );

我尝试了 Promise 'then' 函数中的 refetchQueries 函数，但它崩溃了。

【参考方案1】：

我从 queries.js 文件中导出了查询，然后启用了使用 ApolloClient 的重新获取选项。