Changing requests endpoint and headers

It is often necessary to set additional headers on the GraphQL requests or change the endpoint to where the requests are made. By default Relate has the following configuration:

1
2
3
4
5
6
7

{
  endpoint: '/graphql',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
}

You can change these defaults in two ways: using a reducer factory method or sending them in the initial state of the reducer.

Reducer Factory

This is a helper method to include your reducer, to which you can pass a settings which is merged with the defaults above. To do this, instead of including the reducer in your combine reducers like this:

1
2
3
4
5
6
7

import {combineReducers} from 'redux';
import {relateReducer} from 'relate-js';

export default combineReducers({
  // ... other reducers you might have
  relateReducer
});

You do it with the reducer factory, like so:

1
2
3
4
5
6
7
8
9

import {combineReducers} from 'redux';
import {relateReducerInit} from 'relate-js';

export default combineReducers({
  // ... other reducers you might have
  relateReducer: relateReducerInit({
    endpoint: 'http://anotherserver/graphql'
  })
});

In the example above we’re changing the default endpoint but the headers remain the default ones. But if you change the headers it won’t merge with the defaults. So if you do this:

1
2
3
4
5

relateReducerInit({
  headers: {
    something: true
  }
})

Your final configuration will be like this:

1
2
3
4
5
6

{
  endpoint: '/graphql',
  headers: {
    something: 1
  }
}

Changing Reducer Initial State

You can also define your configuration when creating the Redux store by passing configuration through the initialState.

1
2
3
4
5
6
7
8
9

const initialState = {
  relateReducer: {
    endpoint: '/graphql',
    headers: {
      'x-important-header': 'foo'
    }
  }
};
const store = configureStore(intialState);

Note that none of the values are merged with the defaults. So if you only want to change the endpoint you’d have to set the initial state to:

1
2
3
4
5
6
7
8
9

const initialState = {
  relateReducer: {
    endpoint: 'http://anotherserver/graphql',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    }
  }
};

Mutating Headers and Endpoint

You also might want to set new headers or change the endpoint for different resources. Relate allows you to modify these using standard Redux actions from anywhere in your application.

Here’s an example of setting an authorization header (for example, setting a bearer token after successfully logging in).

1
2

import {setHeader} from 'relate-js';
dispatch(setHeader('Authorization', 'Bearer 123456'));

If no longer needed, a header can be removed:

1
2

import {removeHeader} from 'relate-js';
dispatch(removeHeader('Authorization'));

You can also change the endpoint:

1
2

import {setEndpoint} from 'relate-js';
dispatch(setEndpoint('/different-graphql-endpoint'));