2

我正在开发连接到 GraphQL 后端的 React 项目。在该项目中,我在控制台中收到此错误。

bundle.esm.js:23 Uncaught TypeError: retriedResult.subscribe is not a function
        at Object.next (bundle.esm.js:23)
        at notifySubscription (Observable.js:152)
        at onNotify (Observable.js:196)
        at SubscriptionObserver.next (Observable.js:248)
        at bundle.esm.js:107

我不确定此错误何时何地发生。但这会导致项目中出现严重问题,例如登录和注销无法正常工作。

我在我的代码库中找到retriedResult.subscribe了这一行。但是没有这样的功能。

这是ApiClient.js文件

import ApolloClient from "apollo-client";
import { ApolloLink, Observable } from "apollo-link";
import { createHttpLink } from "apollo-link-http";
import { onError } from "apollo-link-error";
import { RetryLink } from "apollo-link-retry";
import { InMemoryCache } from "apollo-cache-inmemory";
import gql from "graphql-tag";
import _ from "underscore";

const promiseToObservable = (promise) => {
  console.log('promiseToObservable')
  return new Observable((subscriber) => {
    promise.then(
      (value) => {
        console.log('promiseToObservable inside then')
        if (subscriber.closed) return;
        subscriber.next(value);
        subscriber.complete();
      },
      (err) => {
        console.log('promiseToObservable error',err)
        subscriber.error(err)
      }
    );
    console.log('promiseToObservable down')
    return subscriber; // this line can removed, as per next comment
  });
};

const client = new ApolloClient({
  link: ApolloLink.from([
    new RetryLink(),
    onError(({ graphQLErrors, networkError, forward, operation }) => {
      const logoutHandler = async () => {
        try {
          console.log("LOGOUT HANDLER #1");
          client.cache.reset();
          console.log("LOGOUT HANDLER #2");
          await client.reFetchObservableQueries();
          console.log("LOGOUT HANDLER #3");
          return;
        } catch (error) {
          console.log("LOGOUT HANDLER ERROR", error);
        }
      };

      const tokenRefresh = async () => {
        try {
          console.log("UP ^^^");
          const response = await client.mutate({
            mutation: gql`
              mutation AuthService {
                refreshToken
              }
            `,
          });

          console.log("Down ^^^",response);

          if (response.data.refreshToken === true) {
            console.log("REFRESH TOKEN true");
            return true;
          } else {
            console.log("REFRESH TOKEN false");
            return false;
          }
        } catch (error) {
          console.log("REFRESH TOKEN ERROR", error);

          return false;
        }
      };

      if (graphQLErrors) {
        console.log("*********************",graphQLErrors);
        for (const err of graphQLErrors) {
          if (_.isObject(err.extensions)) {
            switch (err.extensions.code) {
              case "UNAUTHORIZED":
                console.log("#1 UNAUTHORIZED");
                return promiseToObservable(tokenRefresh()).flatMap(
                  (success) => {
                    if (success === true) {
                      console.log("UNAUTHORIZED success true");
                      return forward(operation);
                    } else {
                      console.log("UNAUTHORIZED success false");
                      return forward();
                    }
                  }
                );

              case "REFRESH_TOKEN_EXPIRED":
              case "USER_DISABLED":
              case "USER_SUSPENDED":
              case "REFRESH_TOKEN_ERROR":
                console.log("logout handler called!", err.extensions.code);
                return logoutHandler();
              default:
                return;
            }
          } else {
            return;
          }
        }
      } else {
        return;
      }

      if (networkError) {
        return forward(operation);
      }
    }),
    createHttpLink({
      uri: process.env.REACT_APP_API_URL,
      credentials: "include",
    }),
  ]),
  cache: new InMemoryCache(),
  defaultOptions: {
    watchQuery: {
      fetchPolicy: "cache-and-network",
      errorPolicy: "ignore",
    },
    query: {
      fetchPolicy: "no-cache",
      errorPolicy: "all",
    },
    mutate: {
      fetchPolicy: "no-cache",
      errorPolicy: "all",
    },
  },
});

export default client;

我猜他的文件是造成这个错误的原因,即使我找不到错误发生的确切位置。

有人知道为什么会这样吗?

4

0 回答 0