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

Question

In my code I have done a mutation call from frontend (react) to backend which run the 5 file of SQL query. But in frontend I am showing loading...

//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;
  };

After run all queries frontend get "update done" msg but I want to show a progress bar like 1 of 5 file updated .

After googling i found socket io and websocket but I don't get any think.. how to use this in my project and others way to do this

Answer 1

Graphql subscriptions can be helpful in solving this issue. You can create a subscription which provides update on every single sql query run. Here is the reference link https://www.howtographql.com/graphql-js/7-subscriptions/ .