從后端 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/ 。