I'm working on React project which is connected to the GraphQL backend. In that project, I am getting this error in the console.
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
I am not sure when and where does this error occur. But this causes serious issues in the project such as login and logout not working correctly.
I find retriedResult.subscribe this line in my codebase. But there is no such a function.
This is the ApiClient.js file
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;
I guess this file is responsible for this error even though I couldn't find the exact location of the error occurs.
Does anybody have any idea why this happens?