Apollo-client: Add docs about how to pass a session cookie

[gauravtiwari]

Hey @stubailo @jbaxleyiii

I checked out the Meteor demo and also @johnthepink PR for auth middleware. For SPA's this would work well, because they would need some kind of middleware to authenticate with server to share context, but if the app works in the same environment as server it would be important to share session state with server through apollo client during requests (also it's easier). You may have seen in Relay that they allow setting headers and passing session cookie: https://facebook.github.io/relay/docs/guides-network-layer.html directly through network layer.

This approach is super simple, what you think? Is am missing anything?

[jbaxleyiii]

@gauravtiwari I think this is already currently possible actually! (but not yet documented!)

Two ways to do this:

const networkInterface = createNetworkInterface('/graphql`, { 
    headers: {
      Authorization: 'Basic SSdsbCBmaW5kIHNvbWV0aGluZyB0byBwdXQgaGVyZQ==',
    }
});

const client = new ApolloClient({ networkInterface });

Or using a middleware:

const client = new ApolloClient();

client.networkInterface.use((request, next) => {
    if (!request.options.headers) {
      request.options.headers = new Headers();
    }

    request.options.headers.Authorization = 'Basic SSdsbCBmaW5kIHNvbWV0aGluZyB0byBwdXQgaGVyZQ==';
  };
});

@stubailo @johnthepink we should document this and export the auth middlware

[gauravtiwari]

@jbaxleyiii Awesome! I could add this to docs. Does this send session cookie as well with the request?

[stubailo]

Looks pretty similar to what I documented for Meteor: http://docs.apollostack.com/apollo-client/meteor.html#Using-with-Meteor-Accounts

[jbaxleyiii]

@gauravtiwari we use fetch behind the scenes which allows for sending cookies:

Check out https://github.com/github/fetch/blob/7f71c9bdccedaf65cf91b450b74065f8bed26d36/README.md#sending-cookies

[jbaxleyiii]

so the object you pass with headers can pass a credentials key with style you want

[gauravtiwari]

Thanks @jbaxleyiii that makes sense. So, it's basically same thing as Relay. For anyone else using Rails or some other framework environment,

import ApolloClient, { createNetworkInterface } from 'apollo-client';

const networkInterface = createNetworkInterface('/graphql', {
  credentials: 'same-origin',
  headers: {
    'X-CSRF-Token': "xyz",
    token: 'supersecret'
  }
});

const client = new ApolloClient({ networkInterface });

[stubailo]

Only part missing is to add this to the http://docs.apollostack.com/

[gauravtiwari]

@stubailo I will submit a PR to docs repo

[gauravtiwari]

PR: https://github.com/apollostack/docs/pull/35

[bkeating]

A bit late here, but as a Django / graphene-python user, I got things working only after renaming my CSRF header key from X-CSRF-Token to X-CSRFToken.

[bitrix1]

import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
const client = new ApolloClient({
    link: new HttpLink(
        {credentials: 'same-origin'} // save session. (xhr.withCredentials=true)
    ),
    cache: new InMemoryCache(),
});

[ghost]

I'm on apollo-link-http: 1.5.4 and this code is not working because my localhost cookies are not sent in the request. Why?

const httpLink = new HttpLink({
  uri: `...url...`,
  credentials: "same-origin"
});

export const client = new ApolloClient({
  link: from([stateLink, errorLink, httpLink]),
  cache
});

[allen-munsch]

I had also confused apollo-boost with apollo-client. Switched to apollo-client and used the following for graphene-django ( no crsf_exempt on the django url and no cors middleware )

import { ApolloProvider } from "react-apollo";
import ApolloClient from 'apollo-client';
import { HttpLink} from 'apollo-link-http';
import {InMemoryCache as Cache} from "apollo-cache-inmemory";
import { ApolloLink } from 'apollo-link'

const uri = `http://127.0.0.1:8000/graphql`; // not localhost
const AuthLink = (operation, next) => {
  const token = window.csrf_token;

  operation.setContext(context => ({
    ...context,
    headers: {
      ...context.headers,
      "X-CSRFToken": token,
    },
  }));

  return next(operation);
};

const link = ApolloLink.from([
  AuthLink,
  new HttpLink({ uri }),
]);

const apollo = new ApolloClient({
  link,
  cache: new Cache().restore({}),
});