Version 3 breaking changes

Some changes have been made in the branch v2.2 that got me thinking, do we really need to have custom configs to create an ApolloClient ? it would be much simpler to just have support for any ApolloClient, specially because I think most people will go for apollo-boost, the only downside I see is to implement subscriptions and other stuff that’s not yet in apollo-boost (related to this issue) but even for that we can just create our custom ApolloClient and follow Apollo’s docs to integrate the different links

Related to #12

[lfades]

Here’s an example that creates the same ApolloClient created by this package using every possible option:

import ApolloClient from 'apollo-client';
import { ApolloLink, split } from 'apollo-link';
import { HttpLink } from 'apollo-link-http'
import { WebSocketLink } from 'apollo-link-ws'
import { setContext } from 'apollo-link-context';
import { onError } from 'apollo-link-error';
import { InMemoryCache } from 'apollo-cache-inmemory'
import { getMainDefinition } from 'apollo-utilities';
import withApollo from 'next-with-apollo'
import { GRAPHQL_URL, WS_URL } from '../configs'

export default withApollo(({ headers = {} }) => {
  const ssrMode = !process.browser

  const httpLink = new HttpLink({
    uri: GRAPHQL_URL
  })

  const wsLink = !ssrMode && new WebSocketLink({
    uri: WS_URL,
    options: {
      reconnect: true,
      connectionParams: {
        authorization: headers.authorization
      }
    }
  })

  const contextLink = setContext(
    async () => ({
      headers: {
        authorization: headers.authorization
      }
    })
  )

  const errorLink = onError(
    ({ graphQLErrors, networkError }) => {
      if (graphQLErrors) {
        graphQLErrors.map(err =>
          console.log(`[GraphQL error]: Message: ${err.message}`)
        )
      }
      if (networkError) console.log(`[Network error]: ${networkError}`)
    }
  )

  let link = ApolloLink.from([errorLink, contextLink, httpLink])

  if (!ssrMode) {
    link = split(
      // split based on operation type
      ({ query }) => {
        const definition = getMainDefinition(query);
        return (
          definition.kind === 'OperationDefinition' &&
          definition.operation === 'subscription'
        )
      },
      wsLink,
      link
    )
  }

  const cache = new InMemoryCache({
    dataIdFromObject: ({ id, __typename }) =>
      id && __typename ? __typename + id : null
  })

  return new ApolloClient({ link, ssrMode, cache })
})

The code is not really heavy to understand, but there are a lot of dependencies

[lfades]

@LawJolla you’re right, I’ll update the comment with a fix