Sveltekit + Apollo: Recommended approach for integration

Help
1

Hi everyone. Our project is adopting Sveltekit, a new framework for developing cybernetically enhanced web apps. The goal is to make the /graphql endpoint work, combined with the GraphQl playground. We have some working code, but would like to hear your recommendations, and maybe eventually we can corporate to add a an “official” apollo sveltekit package.

server.executeOperation approach
In our project, we are currently using the apollo-server package, and then utilize the server.executeOperation fn. Seems to work pretty good, but currently we can’t get it to work with the playground (it fails with Must provide query string) on GET requests:

import type { RequestHandler } from '@sveltejs/kit';
import type { EddyLocals } from '../../hooks';
import server from './_server';

const handler: RequestHandler<EddyLocals> = async (args) => {
    const { headers, locals, rawBody } = args;
    let operationName, variables, query;
    if (typeof rawBody === 'string') {
        ({ operationName, variables, query } = JSON.parse(rawBody));
    }
    const response = await server.executeOperation(
        {
            http: operationName,
            variables,
            query: query || '',
        },
        { headers, locals }
    );
    return {
        status: response?.http?.status,
        body: JSON.stringify(response),
        headers: {
            'Content-Type': 'application/json',
        },
    };
};

export const head = handler;
export const get = handler;
export const post = handler;

Using a package like apollo-server-lambda
I found this repo on github, that uses apollo-server-lambda, to built something very similar:

const graphqlHandler = apolloServer.createHandler();

const handler: RequestHandler = async (args) => {
  return await new Promise<EndpointOutput>((resolve, reject) => {
    graphqlHandler(
      {
        httpMethod: args.method,
        headers: args.headers,
        path: args.path,
        body: args.rawBody as string,
      } as any,
      {} as any,
      (err, result) => {
        if (err) {
          reject(err);
        } else {
          resolve({
            status: result.statusCode,
            body: result.body,
            headers: result.headers as any,
          });
        }
      }
    ) as any;
  });
};

export const head = handler;
export const get = handler;
export const post = handler;

So some questions:

  • Does it make sense to use the apollo lambda project, even if not using AWS?
  • Is it “ok” to use the executeOperation method in production like shown in the first example?

Looking forward to your feedback :sweat_smile:

2

Hi Alex,
Did you get a response? Are you still working on this?
I’m trying more or less the same but in addition to getting things to run with Sveltekit, I also want it to run on Cloudflare.

Cheers,
Eric

1 Like
3

Hi @eric-naguras.

We are successfully using the executeOperation approach, which works great.
Currently, we have our project running on Heroku.

The plan is to move some of it to Cloudflare, and we even did a POC.
But please notice that the Cloudflare workers runtime is not a true Node.js environment, and thus many packages will not be able to run there. The error messages are also not always super helpful when building - but now you are warned :sweat_smile:

Would love to do some knowledge sharing, so you can just hit me with a DM if you wan’t do a quick chat.

Good luck!

4

Hi Alex,

Thanks for your reply.

How do I reach you via DM?
Can I also have your regular email address?
Mine is eric@naguras.com

1 Like