Installing @apollo/client for React gives Eslint errors.

[RoyBkker]

Hi all,

When starting a new project, Eslint gives the following errors on Apollo imports, which is new for me. Previous projects with same setup, doesn't complain about it.

This is my apolloProvider.tsx:

import React from "react";

import {
  ApolloClient,
  ApolloProvider,
  InMemoryCache,
  createHttpLink,
  from,
  split,
} from "@apollo/client";

import { setContext } from "@apollo/client/link/context";
import { onError } from "@apollo/client/link/error";
import { getMainDefinition } from "@apollo/client/utilities";
import { WebSocketLink } from "@apollo/client/link/ws";

import { getBackendUri, getWebsocketUri } from "../utils/getEnv";

const httpLink = createHttpLink({
  uri: `${getBackendUri()}/graphql`,
  credentials: "include",
});

const wsLink = new WebSocketLink({
  uri: `${getWebsocketUri()}`,
  options: {
    reconnect: true,
  },
});

// The split function takes three parameters:
//
// * A function that's called for each operation to execute
// * The Link to use for an operation if the function returns a "truthy" value
// * The Link to use for an operation if the function returns a "falsy" value
const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === "OperationDefinition" &&
      definition.operation === "subscription"
    );
  },
  wsLink,
  httpLink
);

const authLink = setContext((_, { headers }) => {
  // get the authentication token from local storage if it exists
  const token = localStorage.getItem("token");
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    },
  };
});

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${JSON.stringify(
          locations
        )}, Path: ${path}`
      )
    );

  if (networkError) console.log(`[Network error]: ${networkError}`);
});

const client = new ApolloClient({
  link: from([authLink, errorLink, splitLink]),
  cache: new InMemoryCache(),
});

interface Props {
  children: React.ReactNode;
}
const Client = (props: Props) => {
  const { children } = props;
  return <ApolloProvider client={client}>{children}</ApolloProvider>;
};

export default Client;

This is the error from Eslint:

'@apollo/client/link/ws' should be listed in the project's dependencies. Run 'npm i -S @apollo/client/link/ws' to add iteslintimport/no-extraneous-dependencies

Running the provided command is not working.

The error is for all the following imports:

import { setContext } from "@apollo/client/link/context";
import { onError } from "@apollo/client/link/error";
import { getMainDefinition } from "@apollo/client/utilities";
import { WebSocketLink } from "@apollo/client/link/ws";

Running "@apollo/client": "^3.3.18"

Anyone else had this issue?

[mlarcher]

It is an issue with eslint-plugin-import since 2.23.0
cf https://github.com/benmosher/eslint-plugin-import/issues/2066 for more info