我正在开发连接到 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;
我猜他的文件是造成这个错误的原因,即使我找不到错误发生的确切位置。
有人知道为什么会这样吗?