Apollo Link Support

[sepehr500]

I would like to be able to use persistgraphql with Apollo link. Is there a way to currently do this? Can it be a feature?

[stubailo]

Yeah definitely this is something we want to do asap, since apollo link is such a natural way to combine stuff.

[Poincare]

Yeah, definitely - this sounds awesome. I'd be happy to help a contributor in case someone's interested in building this?

[Poincare]

Here's what I think the implementation could look like for a PersistLink:

In the request method, we can use the query map produced by persistgraphql in order to look up the ID associated with the query within the Operation, just as we do here. We can then pass along the constructed query to the forward link.

[mergebandit]

@Poincare any chance you're at the graphql summit? I'd be happy to meet up tomorrow and discuss this fix in person if you are.

[Poincare]

@mergebandit Unfortunately, I wasn't able to make it to Summit - there is a completed implementation of this link right here.

[mergebandit]

The help wanted label is still attached to this issue - do you still want help, or are you good-to-go once that PR gets pushed through?

[pleerock]

There is a big lack of docs on how to use persistgraphql with apollo client. I don't know and simply can't find how to connect that ApolloNetworkInterface to my angular app. I guess this issue is related to this problem, so my question is - is it possible to use this library with Apollo client functionality we have up to date?

EDIT: Okay, I found the way, its something like this:

export class AppModule {

    constructor(apollo: Apollo, httpLink: HttpLink) {
        apollo.create({
            link: httpLink.create({ uri: environment.graphServer }),
            cache: new InMemoryCache()
        });
        addPersistedQueries(apollo, outputMap);
    }

}

But now I have different not related to this particular issue because there is no umd bundle for this package.

[amityo]

@pleerock does the code work for you? I can see that resolve from query to id works, but QueryManager throws excpetion: query option is required. You must specify your GraphQL document in the query option.

[cocacrave]

Any update on how to connect with Apollo Link? The comments here are few months old but I don't see any docs

[cooperka]

It seems like this library hasn't been updated since Apollo 2.0 with links. The good news is it's very simple to create a link yourself. All that's needed is the getQueryDocumentKey util.

Here's my working code:

import { ApolloClient } from 'apollo-client';
import { ApolloLink } from 'apollo-link';
import { getQueryDocumentKey } from 'persistgraphql';

import queryMap from './extracted_queries.json';

const persistedQueryLink = new ApolloLink((operation, forward) => {
  const { query, extensions } = operation;

  const queryKey = getQueryDocumentKey(query);
  const persistedQueryId = queryMap[queryKey];

  if (!persistedQueryId) {
    throw new Error('Failed to find query in persisted query map.');
  }

  extensions.persistedQuery = {
    id: persistedQueryId,
  };

  // https://www.apollographql.com/docs/link/links/http.html#persisted-queries
  operation.setContext({
    http: {
      includeExtensions: true,
      includeQuery: false,
    },
  });

  return forward(operation);
});

// Example client creation. You'll probably have other links, too.
const apolloClient = new ApolloClient({ link: persistedQueryLink });

If anyone wants to turn this into a PR here, be my guest.

[ellioseven]

@cooperka

I am wondering how you managed to implement the id via extensions?

I am getting:

GraphQL Request must include at least one of those two parameters: "query" or "queryId"

Which suggests that the extension is not being passed on?

I would greatly appreciate an implementation example .