在调用突变时从后端graphql获取通知以进行前端反应答案

【问题标题】：Get notifications form backend graphql to frontend react while calling mutation在调用突变时从后端graphql获取通知以进行前端反应
【发布时间】：2020-08-21 06:45:38
【问题描述】：

在我的代码中，我完成了从前端（反应）到后端的突变调用，该调用运行 SQL 查询的 5 文件。但在前端我显示加载...

//frontend
<Button onClick={()=>addData()} />

Const addData = async ()=>{
const result = await AddDataMutation({data:somedata});
console.log(result)
}

const mutation = graphql`
  mutation AddDataMutation($input: [String]) {
   runQuery (input: $input)
  }
`;
export default (data, callback) => {
  return new Promise((resolve, reject) => {
    const variables = {
      input: fileName,
    };
    commitMutation(environment, {
      mutation,
      variables,
      onCompleted: (response, error) => {
        console.log("update done")
      },
      onError: (err) => console.error(err),
    });
  });
};

//Backend
function runQuery(arr) {
      log.info('backend called', arr);
      let fileResult;
      for (let j = 0; j < arr.length; j++) {
      const output = pgpool.query(sqlQueryFile)      
      }
      return fileResult;
  };

运行所有查询后，前端会收到“更新完成”消息，但我想显示一个进度条，如 1 of 5 file updated 。

谷歌搜索后，我找到了socket io 和websocket，但我没有想到..如何在我的项目中使用它以及其他方式来做到这一点

【问题讨论】：

标签： javascript reactjs websocket socket.io graphql

【解决方案1】：

Graphql 订阅有助于解决这个问题。您可以创建一个订阅，该订阅为每个 sql 查询运行提供更新。这是参考链接 https://www.howtographql.com/graphql-js/7-subscriptions/ .

【讨论】：