使用 apollo 客户端刷新令牌后如何重新渲染我的组件？

Question

我与 apollo 客户端合作，使用 jwt 实现身份验证。当我在令牌过期时尝试执行 smt 时，我从后面捕获了错误，刷新令牌，然后重新发送请求。它按应有的方式工作，但我的组件不会重新渲染，新请求发送，我获取数据，但我的组件仍然显示错误。如何使用新数据重新渲染我的组件？

  const errorLink = onError(
    ({ graphQLErrors, networkError, operation, forward }) => {
      if (graphQLErrors) {
        graphQLErrors.forEach(({ message, locations, path }) => {
          console.log(
            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
          );

          // Handle specific errors
          if (message === "jwt expired") {
            Refreshtoken()
              .then((r) => forward(operation))
              .catch((e) => console.log("@1", e));
          }
          if (
            message ===
            "Access denied! You don't have permission for this action!"
          ) {
            // Call Refreshtoken function or perform any other desired action
            fromPromise(
              Refreshtoken()
                .then((r) => {
                  getNewToken("access-token").then((r) => {
                    operation.setContext({
                      headers: {
                        authorization: `Bearer ${r}`,
                      },
                    });
                    console.log("operation", operation.getContext());
                    return toPromise(forward(operation))                  });
                })
                .catch((e) => console.log("@", e))
            );
          }
          //get new token from cookies
        });
      }

      if (networkError) {
        console.log("@");
        console.log(`[Network error]: ${networkError}`);

        
      }
    }
  );


Code from component 

  const { loading, data } = useQuery(
    GET_ANIME,

    
    { variables: { slug: params.slug }, fetchPolicy: 'no-cache', }
  );

我希望在我重新发送请求并获取数据后，我的组件将使用正确的数据重新呈现，没有错误。 我尝试更改 onError 代码，更改缓存策略，但它对我不起作用。

Answer 1

您需要更改状态才能重新渲染组件。添加

useState

挂钩，并在收到所需数据时更改值。这将导致整个组件重新渲染，但听起来在您的情况下，

useState

钩子可能应该包含您尝试显示的输出。