Apollo-client: Link options not being passed to HttpLink constructor

Created on 13 May 2018 · 2Comments · Source: apollographql/apollo-client

Intended outcome:

I've run into an issue while trying to pass a custom fetch function to allow a client to play nice with IE 11. After a little digging, it appears as though the fetch function never actually gets passed to HttpLink, since fetchOptions is passed but never spread to set fetch. I think part of the confusion may be related to the naming of the fetchOptions property on the PresetConfig interface. Seems like a more appropriate name might be linkOptions, since HttpLink.Options contains both fetch and fetchOptions properties.

Actual outcome:

Receive a console error:

fetch is not found globally and no fetcher passed, to fix pass a fetch for
your environment like https://www.npmjs.com/package/unfetch.
For example:
import fetch from 'unfetch';
import { createHttpLink } from 'apollo-link-http';
const link = createHttpLink({ uri: '/graphql', fetch: fetch });

How to reproduce the issue:

import ApolloClient from 'apollo-boost';
import fetch from 'unfetch';
// Produces an error on IE 11.
const client = new ApolloClient({
  fetchOptions: { fetch },
  uri: process.env.GRAPHQL_API_URL,
});

I think one solution to resolving my issue and a few other issues and PRs related to setting the credentials property may be to simply spread the fetchOptions/linkOptions to overwrite the default values if they exist on the config object.

export interface PresetConfig {
  request?: (operation: Operation) => Promise<void>;
  uri?: string;
--  fetchOptions?: HttpLink.Options;
++  linkOptions?: HttpLink.Options;
  clientState?: ClientStateConfig;
  onError?: ErrorLink.ErrorHandler;
  cacheRedirects?: CacheResolverMap;
}

constructor(config: PresetConfig) {
  // ...
  const httpLink = new HttpLink({
++  credentials: 'same-origin',
--  uri: (config && config.uri) || '/graphql',
++  uri: '/graphql',
--  fetchOptions: (config && config.fetchOptions) || {},
++  ...config,
--  credentials: 'same-origin',
  });
  // ...
}

Version