在 useMutation 中使用“refetchQueries”时，“OnCompleted”对 useQuery 不起作用，如何解决？答案

【问题标题】："OnCompleted" does not work for useQuery when using "refetchQueries" in useMutation, how to fix it?在 useMutation 中使用“refetchQueries”时，“OnCompleted”对 useQuery 不起作用，如何解决？
【发布时间】：2021-12-25 10:46:51
【问题描述】：

在使用useMutation时，我添加refetchQueries来获取修改后的数据。

let [saveTemplate, { loading}] = useMutation(gql`
  ${templateFragment}
  mutation saveTemplate ($template:saveTemplateTemplatesType!,$token:String!){
    saveTemplate(template:$template,token:$token){
    ...template
    }
  }
  `,{refetchQueries:["getUserData"],onError:()=>{message.warn("error")},onCompleted:()=>{console.log("success")}});

向服务器发出突变请求。数据返回，但是useQueries的onCompleted不起作用。

let { loading } = useQuery(
    gql`
      ${templateFragment}
      query getUserData($userToken: String) {
        getUsersData(userToken: $userToken) {
          templates {
            ...template
          }
          token
        }
      }
    `,
    {
      variables: {
        userToken: userToken ? userToken.replace(/"/g, ``) : null,
      },
      onCompleted: (data) => {
        props.isAuthAC(
          true,
          data.getUsersData.templates,
          data.getUsersData.token
        );
      },
      onError: () => console.log("err"),
    }
  );

【问题讨论】：

在 github 上打开一个问题 ...但是没有理由将数据从 apollo 缓存复制到其他状态（redux？）

标签： reactjs graphql apollo-client

【解决方案1】：

在 github 上找到了解决方案。你需要添加到 useQuery: notifyOnNetworkStatusChange: true。

  let { loading } = useQuery(
    gql`
      ${templateFragment}
      query getUserData($userToken: String) {
        getUsersData(userToken: $userToken) {
          templates {
            ...template
          }
          token
        }
      }
    `,
    {
      variables: {
        userToken: userToken ? userToken.replace(/"/g, ``) : null,
      },
      notifyOnNetworkStatusChange: true,
      onCompleted: (data) => {
        props.isAuthAC(
          true,
          data.getUsersData.templates,
          data.getUsersData.token
        );
      },
      onError: () => console.log("err"),
    }
  );

【讨论】：