APQ support with ApolloServer

[intellix]

So I've randomly stumbled upon the example where you can use persistedQueries and it gave me the thirst for adding it to speed up socket messages. The example on the homepage is extremely barebones and I guess it just gives an idea that it's possible using graphql-ws, but I was wondering if anyone else had achieved it with a full ApolloClient/Server stack at all and could give some pointers for how to achieve it with Automatic Persisted Queries?

So with APQ the idea is that you mostly assume the persisted query is already known in the server and if it responds with: "PersistedQueryNotFound" then you remake the same query and provide the query, which is cached and then everyone follows the happy path. Without it you'd need some sort of build process for adding all possible persisted queries from the frontend and storing them in the backend which would be a ballache.

Websocket client in frontend:

So in the client, I've basically done this which attempts to make the request with only the persistedQuery (at which point the backend is meant to respond that it doesn't exist):

import { createPersistedQueryLink } from 'apollo-angular/persisted-queries';
createPersistedQueryLink({ sha256 }).concat(websocketLink)

Which looks to work:

One part I'm not sure about, is if the retrying is automatically handled within the socket, but for now let's look at the server:

Unfortunately the PersistedQueryError isn't exposed so I just copied it from ApolloServer:

export class PersistedQueryNotFoundError extends GraphQLErrorWithCode {
  constructor() {
    super('PersistedQueryNotFound', ApolloServerErrorCode.PERSISTED_QUERY_NOT_FOUND, {
      extensions: {
        http: {
          headers: new HeaderMap([['cache-control', 'private, no-cache, must-revalidate']]),
          status: 200,
        },
      },
    });
  }
}

And within graphql-ws useServer onSubscribe hook I'm searching for the query from the same cache where ApolloServer puts it and am throwing the required error to alert the frontend that it doesn't exist and you need to re-make the same query:

async onSubscribe({ extra }, msg) {
  let query: string;
  const pqh = msg.payload.extensions?.persistedQuery as { sha256Hash: string; version: string };

  if (pqh) {
    query = await cache.get(`apq:${pqh.sha256Hash}`);
    if (!query) {
      throw new PersistedQueryNotFoundError();
    }
  }
  
  const args = {
    document: parse(query ?? msg.payload.query),
    ...

Now my current problem is that when the socket receives an error, it just dies and I can't even see it in the response:

The error is basically a CloseEvent:

And the error on the server as well suggests I shouldn't be throwing inside onSubscribe():

I'm guessing that for APQ I wouldn't be able to use Errors at all with sockets and I'd have to return the error as a standard response?

[enisdenjo]

Hey there, I am not an Apollo expert but I can help out with the graphql-ws part.

The reason why the whole connection closes is because graphql-ws server treats all errors thrown from hooks as fatal and unexpected. If you want to stop/error-out only one specific subscription, both client and server side, you should return an array of GraphQLErrors from onSubscribe instead.

async onSubscribe({ extra }, msg) {
  let query: string;
  const pqh = msg.payload.extensions?.persistedQuery as { sha256Hash: string; version: string };

  if (pqh) {
    query = await cache.get(`apq:${pqh.sha256Hash}`);
    if (!query) {
-      throw new PersistedQueryNotFoundError();
+      return [new GraphQLError('Persisted query not found')]
    }
  }
  
  const args = {
    document: parse(query ?? msg.payload.query),
    ...

Since the error gets serialised when sent to the client, it doesn't really matter what type of it is.