HriBB/apollo-upload-network-interface

Unexpected token import

Closed this issue · 4 comments

Hi, I have issue after use it.

This is the code

import ApolloClient from 'apollo-client';
import createNetworkInterface from 'apollo-upload-network-interface';


const networkInterface = createNetworkInterface({
  uri: GRAPHQL_ENDPOINT,
});

const client = new ApolloClient({
  networkInterface
});

then when run the applications this is the error.

Uncaught SyntaxError: Unexpected token import -> networkInterface.js?formatted:9


import 'whatwg-fetch'; <- here is where the error appear
import { print } from 'graphql-tag/printer';
export function printRequest(request) {

apollo-client and apollo-upload-network-interface versions here

"apollo-client": "^0.8.3",
"apollo-upload-network-interface": "^1.0.4",

thanks

HriBB commented

They switched the way they bundle apollo-client apollographql/apollo-client#1237

Which bundler do you use? For webpack1 I solved it by configuring my babel-loader like this

{
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: /node_modules\/(?!(apollo-client)\/).*/,
  include: [
    path.resolve(__dirname, '..', 'config'),
    path.resolve(__dirname, '..', 'client'),
    path.resolve(__dirname, '..', 'node_modules', 'apollo-client'),
    //reactMdlExtraPath,
  ],
  query: {
    cacheDirectory: true,
  },
}

OMG, Really nice, run good for me. so many many thanks @HriBB. Another question. I can implement authentication via JWT using this networkInterface?

HriBB commented

NP ;)

Sure, you can send Authorization header like this

class AuthMiddleware {
  applyMiddleware(req, next) {
    const token = canUseDOM ? localStorage.getItem('token') : null
    if (token) {
      if (!req.options.headers) {
        req.options.headers = {}
      }
      req.options.headers.Authorization = 'Bearer ' + token
    }
    next()
  }
}

networkInterface.use([
  new AuthMiddleware(),
])
HriBB commented

Closing issue.