Search code examples
laravelreactjscsrfgraphqlrelayjs

Where do you put the CSRF token in Relay/GraphQL?

I am trying to get Relay and GraphQL set up with my Laravel server. I have successfully set Laravel up to serve GraphQL.

In the past, to make ajax calls with jQuery I added the following to my master.blade.php:

 <meta name="csrf-token" content="{{ csrf_token() }}">

and the following to my main.js file:

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

My GraphQL endpoint is currently returning token mismatch exception. It seems to me that Relay needs to pass the csrf-token to the server in a similar manner as jQuery.ajax. Where does it go?

Solution

  • Configure your network layer to append headers to each request:

    Relay.injectNetworkLayer(
  new Relay.DefaultNetworkLayer('/graphql', {
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
    },
  })
);

    The second argument to Relay.DefaultNetworkLayer gets passed through to the init argument of fetch(input, init). See the Relay Network Layer Guide for more information.