Could not find "client" in the context or passed in as an option issue when using subscriptions

I need to fetch some data in real-time. So I decided to use the WebSocket connection

import { ApolloClient } from "apollo-client";  import { InMemoryCache } from "apollo-cache-inmemory";  import { ApolloLink, split } from "apollo-link";  import { WebSocketLink } from "apollo-link-ws";  import { HttpLink } from "apollo-link-http";  import { setContext } from "apollo-link-context";  import { firebaseAppAuth } from "../../App";  import { onError } from "apollo-link-error";  import { getMainDefinition } from "apollo-utilities";    import config from "../../config";    const authLink = setContext((_, { headers }) => {    //it will always get unexpired version of the token    if (firebaseAppAuth && firebaseAppAuth.currentUser) {      return firebaseAppAuth.currentUser.getIdToken().then((token) => {        return {          headers: {            ...headers,            "content-type": "application/json",            authorization: token ? `Bearer ${token}` : "",          },        };      });    } else {      return {        headers: {          ...headers,        },      };    }  });    const errLink = onError(({ graphQLErrors, networkError }) => {    console.log(graphQLErrors);    console.log(networkError);    if (graphQLErrors)      graphQLErrors.forEach(({ message, locations, path }) => {        console.log(          `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`        );      });    if (networkError) {      console.log(`[Network error]: ${networkError}`);    }  });    const httpLink = new HttpLink({    uri: config.adminAPI,  });    const wsLink = new WebSocketLink({    uri: config.apiSocket, // use wss for a secure endpoint    options: {      reconnect: true,    },  });    const splittedLink = split(    // split based on operation type    ({ query }) => {      const { kind, operation } = getMainDefinition(query);      return kind === "OperationDefinition" && operation === "subscription";    },    wsLink,    httpLink  );    const link = ApolloLink.from([errLink, authLink, splittedLink]);    const client = new ApolloClient({    cache: new InMemoryCache(),    link,  });    export default client;  

I created authLink, errLink, httpLink and wsLink like the above code. and used the split function to combine httpLink and wsLink, it can run queries without any issues, but when I try to run a subscription hook, it throws following error message.

Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options.    

I am also passing the client as a prop

ReactDOM.render(    <BrowserRouter>      <ApolloProvider client={client}>        <SnackbarProvider maxSnack={5}>          <SnackbarUtilsConfigurator />          <Route path="/" component={App} />        </SnackbarProvider>      </ApolloProvider>    </BrowserRouter>,    document.getElementById("root")  );  

How to resolve this issue?

https://stackoverflow.com/questions/67223474/could-not-find-client-in-the-context-or-passed-in-as-an-option-issue-when-usin April 23, 2021 at 11:10AM