使用 jwt-refresh-link 时出现打字稿错误

Question

这是我第一次尝试打字稿。我正在关注一个处理令牌刷新链接的 youtube 用户身份验证 jwt 教程。我遇到了一个问题，但是教程视频没有这个问题，我不知道如何解决。

这是错误日志：

H:/jwt-auth/web/src/index.tsx
TypeScript error in H:/jwt-auth/web/src/index.tsx(48,5):
Type 'TokenRefreshLink<string>' is not assignable to type 'ApolloLink'.
Types of property 'split' are incompatible.
Type '(test: (op: import("H:/jwt-auth/web/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("H:/jwt-auth/web/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("H:/jwt-auth/web/node_modules/@apollo/client/link/core/types").RequestHandler, right?: import("H:/jwt-auth/web/...' is not assignable to type '(test: (op: import("H:/jwt-auth/web/node_modules/apollo-link/lib/types").Operation) => boolean, left: import("H:/jwt-auth/web/node_modules/apollo-link/lib/link").ApolloLink | import("H:/jwt-auth/web/node_modules/apollo-link/lib/types").RequestHandler, right?: import("H:/jwt-auth/web/node_modules/apollo-link/lib/link...'.
          Types of parameters 'test' and 'test' are incompatible.
            Types of parameters 'op' and 'op' are incompatible.
              Property 'toKey' is missing in type 'import("H:/jwt-auth/web/node_modules/@apollo/client/link/core/types").Operation' but required in type 'import("H:/jwt-auth/web/node_modules/apollo-link/lib/types").Operation'.  TS2322
  46 | const client = new ApolloClient({
    47 |   link: ApolloLink.from([
  > 48 |     new TokenRefreshLink({
       |     ^
    49 |       accessTokenField: "accessToken",
    50 |       isTokenValidOrUndefined: () => {
    51 |         const token = getAccessToken();

这是我的代码：

 const client = new ApolloClient({
      link: ApolloLink.from([
        new TokenRefreshLink({
          accessTokenField: "accessToken",
          isTokenValidOrUndefined: () => {
            const token = getAccessToken();

            if (!token) {
              return true;
            }

            try {
              const { exp } = jwtDecode(token);
              if (Date.now() >= exp * 1000) {
                return false;
              } else {
                return true;
              }
            } catch {
              return false;
            }
          },
          fetchAccessToken: () => {
            return fetch("http://localhost:4000/refresh_token", {
              method: "POST",
              credentials: "include",
            });
          },
          handleFetch: (accessToken) => {
            return setAccessToken(accessToken);
          },
          handleError: (err) => {
            console.warn("Your refresh token is invalid.Try ro relogin");
            console.error(err);
          },
        }),
        onError(({ graphQLErrors, networkError }) => {
          console.log(graphQLErrors);
          console.log(networkError);
        }),
        requestLink,
        new HttpLink({
          uri: "http://localhost:4000/graphql",
          credentials: "include",
        }),
      ]),
      cache,
    });

Answer 1

几个小时前我在尝试使用“apollo-link-token-refresh”时遇到了同样的问题。

我在寻找解决方案时看到了这篇文章。 我相信你现在可能已经解决了这个问题。

为了其他可能遇到同样问题的人的利益，我能够通过将 TokenRefreshLink 从 ApolloLink 中取出，声明一个 any 类型的变量并将 TokenRefreshLink 传递给它来解决它。稍后再次将该变量调用到 ApolloLink 中。

  const tokenRefreshLink: any = new TokenRefreshLink({
  accessTokenField: "accessToken",
  isTokenValidOrUndefined: () => {
    const token = getAccessToken();

    if (!token) {
      return true;
    }

    try {
      const { expiration }: any = jwtDecode(token);
      if (Date.now() >= expiration * 1000) {
        return false;
      } else {
        return true;
      }
    } catch (error) {
      return false;
    }
  },
  fetchAccessToken: () => {
    return fetch("http://<your_endpoint>/<refresh_token_path>", {
      method: 'POST',
      credentials: "include"
    });
  },
  handleFetch: accessToken => {
    // set the access token
    setAccessToken(accessToken);
  },
  handleError: err => {
    console.warn('Your refresh token is invalid. Try to relogin');
    console.error(err);
  }
});

const client = new ApolloClient([

  link: ApolloLink.from([
    tokenRefreshLink,
    onError(({ graphQLErrors, networkError }) => {
      console.log(graphQLErrors)
      console.log(networkError)
    }),
    requestLink,
    new HttpLink({
      uri: "http://<your_endpoint>",
      credentials: "include"
    })
  ]),
  cache
])