apollographql/apollo-link

TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter

Closed this issue · 2 comments

Hey,

Disclaimer: I'm a little over my head with this lib and I did search a while before posting, my apologies is this issue is a trivial error on my side, any help will be gratefully received.

Expected Behavior
On a react project, I'm trying to get a context in order to send a JWT token with every request.

Actual Behavior
The createHttpLink fails and requests are sent to the wrong URI

A simple reproduction

const httpLink = createHttpLink({
    uri: "http://localhost:5507/graphql"
});
console.log(httpLink);

Gives me:

ApolloLink {request: ƒ}
  request: ƒ (operation)
    arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter (<anonymous>:2:14)]
    caller: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter (<anonymous>:2:14)]
    length: 1
    name: ""

More details?
I'm using ES6 and webpack, here are all the versions:

  "dependencies": {
    "@material-ui/core": "^3.9.2",
    "@material-ui/icons": "^3.0.2",
    "apollo-boost": "^0.1.28",
    "apollo-link": "^1.2.8",
    "apollo-link-context": "^1.0.14",
    "graphql": "^14.1.1",
    "react": "^16.8.2",
    "react-apollo": "^2.4.1",
    "react-dom": "^16.8.2"
  },
  "devDependencies": {
    "@babel/core": "^7.3.3",
    "@babel/plugin-proposal-class-properties": "^7.3.3",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "webpack": "^4.29.4",
    "webpack-cli": "^3.2.3"
  },

.babelrc:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ],
}

The actual code I'm trying to run:

import ApolloClient from "apollo-boost";
import { createHttpLink } from "apollo-link-http";
import { setContext } from "apollo-link-context";
import { InMemoryCache } from "apollo-cache-inmemory";

const httpLink = createHttpLink({
    uri: "http://localhost:5507/graphql"
});

const authLink = setContext((_, { headers }) => {
    const jwt = localStorage.getItem("jwt");
    // return the headers to the context so httpLink can read them
    return {
        headers: {
            ...headers,
            authorization: jwt ? `${jwt.token_type} ${jwt.access_token}` : ""
        }
    };
});

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

export default client;

Not sure if I need to add anything else to this?

Thanks in advance for time and help ;)

Seems like I focused on the wrong issue here... I also have a:
ApolloBoost was initialized with unsupported options: link

which might be more relevant, I tried to delete this issue but cannot so I'll just close it, feel free to delete it.

Also if anyone has the same issue, getting the ApolloClient from the right package helps:

before
import ApolloClient from "apollo-boost";

after
import ApolloClient from "apollo-client";