Apollo-angular: Feature: Make queries as GET request and mutations as POST request (apollo-angular-link-http)

[y4nnick]

In the package apollo-angular-link-http we have the parameter method which describes which HTTP method gets used for all the requests (it defaults to POST).

But for various reasons (caching etc.) it would be good if we can make queries as a GET requests and mutations as a POST request.
Since we can make multiple request once with graphQL the logic should be:

• If there are only queries in the request: Trigger a GET request
• If there is one mutation in the request: Trigger a POST request

In fact the apollo-link-http package has exactly that feature with the parameter: useGETForQueries.
We could just copy the implementation from there.

I will try to implement it on my own and provide a PR if this feature request gets approved.

[intellix]

I think you can achieve this already with the split function from apollo-link.

I'm using split for:

• HTTP: Query
• WS: Mutation, Subscription

But you can probably split between two separate http links that you created as well. Maybe it just needs documenting somewhat as you kind of have to discover it yourself from various docs. I happened to know about it cause you have to use it for Subscriptions:

const http = createPersistedQueryLink().concat(
  httpLink.create({
    uri: environment.httpEndpoint,
    method: 'GET',
    withCredentials: true,
  }),
);

const ws = new WebSocketLink({
  uri: environment.socketEndpoint,
  options: { reconnect: true },
});

const link = split(
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query);
    return kind === 'OperationDefinition' && ['mutation', 'subscription'].includes(operation);
  },
  ws,
  http,
);

apollo.create({ link });

[y4nnick]

Thanks, that works perfect.

I just had to read the full docs about links first. Then i would have found this feature.

For future reference, this is how i solved it now:

import { DefinitionNode } from 'graphql';

...

    const linkMutations = httpLink.create({
      uri: 'http://docker.for.mac.localhost:3000/graphql',
      withCredentials: true,
    });

    const linkQueries = httpLink.create({
      uri: 'http://docker.for.mac.localhost:3000/graphql',
      withCredentials: true,
      method: 'GET',
    });

    const definitionIsMutation = (d: DefinitionNode) => {
      return d.kind === 'OperationDefinition' && d.operation === 'mutation';
    };

    const splittedLink = ApolloLink.split(
      ({ query }) => {
        return query.definitions.some(definitionIsMutation);
      },
      linkMutations,
      linkQueries,
    );

    apollo.create({
      ssrMode: true,
      link: splittedLink,
      cache: new InMemoryCache(),
    });