Блог

Это моя первая попытка в typescript. Я просматриваю учебное пособие по jwt для авторизации пользователя YouTube, в котором рассматривается token-refresh-link. Я столкнулся с проблемой, но в обучающем видео этой проблемы не было, и я не знаю, как ее исправить.

Вот журнал ошибок:

 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,
    });
  

Я получил то же самое несколько часов назад при попытке использовать «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
])