从后端 graphql 获取通知以在调用突变时对前端做出反应

Question

在我的代码中，我做了一个从前端（反应）到后端的突变调用，它运行 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但我没有任何想法......如何在我的项目中使用它以及其他方式来做到这一点

Answer 1

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