1

I have a backend with users that i want to display on my frontend folder. In order to do that i need authorization headers to be implemented in React via Apollo Server.

I followed some instruction from here -> https://www.apollographql.com/docs/react/networking/authentication/

This is my code inside App.js

import React from 'react';
import HeroesDota from './components/HeroesDota';


import { ApolloProvider } from '@apollo/react-hooks';

import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { HttpLink } from "apollo-link-http";
import { setContext } from 'apollo-link-context';


const httpLink = new HttpLink({
  uri: "http://localhost:8000/graphql/",
});


const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});

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 App = () => {
return (
    <ApolloProvider client={client}>
      <HeroesDota />
    </ApolloProvider>
)};

export default App;

After i run server on localhost:3000 it says: Uncaught Error: Cannot find module 'apollo-link-context'

I installed apollo-link as dependency. I dont know why this error show up. Here is the actual picture.

enter image description here

package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/react-hooks": "^3.1.3",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "apollo-boost": "^0.4.7",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-link": "^1.2.13",
    "apollo-link-ws": "^1.0.19",
    "bootstrap": "^4.4.1",
    "graphql": "^14.5.8",
    "react": "^16.12.0",
    "react-apollo": "^3.1.3",
    "react-bootstrap": "^1.0.0-beta.16",
    "react-dom": "^16.12.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "styled-components": "^5.0.0",
    "subscriptions-transport-ws": "^0.9.16"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {}
}

1 Answer 1

2

You are importing it right here:

import { setContext } from 'apollo-link-context';

Please run npm i apollo-link-context to fix.

2
  • Please share your package.json Feb 6, 2020 at 10:31
  • I cant. Please run npm i apollo-link-context. You need to install apollo-link-context not just apollo-link. Feb 7, 2020 at 10:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.