Apollo-client: How to compose wss and upload links?

[olchyk98]

Hi, there!

I'm trying to combine upload-link and websocketlink using apollolink.

import { ApolloClient } from 'apollo-boost';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { WebSocketLink } from 'apollo-link-ws';
import { createUploadLink } from 'apollo-upload-client';
import { concat } from 'apollo-link';

import { apiPath, wssPath } from './apiPath';

const client = new ApolloClient({
    link: concat(
        new WebSocketLink({
            uri: `${ wssPath }/graphql`,
            options: { reconnect: true }
        }),
        createUploadLink({ uri: `${ apiPath }/graphql` })
    ),
    cache: new InMemoryCache()
});

export default client;

but i'm receiving error from uploadlink and from apollo (You are calling concat on a terminating link, which will have no effect).

Please, help me..

[pl12133]

See terminating links in the docs.

I don't really know the answer, but you can use two different terminating links by using ApolloLink.split; see Composing Links - Directional Composition.

[olchyk98]

Thanks! I found answer.

In my case that works:

import { ApolloClient } from 'apollo-boost';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { WebSocketLink } from 'apollo-link-ws';
import { createUploadLink } from 'apollo-upload-client';
import { RetryLink } from 'apollo-link-retry';
import { getMainDefinition } from 'apollo-utilities';

const client = new ApolloClient({
    link: new RetryLink().split( // YOHOOOOOO!!! FIXED
        sys => {
            let { operation } = getMainDefinition(sys.query);
            console.log(operation);
            return operation === "subscription";
        },
        new WebSocketLink({
            uri: `${ wssPath }/graphql`,
            options: { reconnect: true }
        }),
        createUploadLink({ uri: `${ apiPath }/graphql` })
    ),
    cache: new InMemoryCache()
});

[djstein]

the above paradigm should probably be added to the documentation.