Apollo server v4 migration question; Sveltekit

[alexbjorlig]

Hi Apollo.

I'm trying to upgrade my team's projects from Apollo-server v3 to v4 - seems like you guys have been busy pushing a big new upgrade 🥳

We are using the Sveltekit framework, and in v3 we handled GraphQl like this:

_server.ts

export default new ApolloServer({
    schema,
    context: ({ locals, output }: { locals: EddyLocals; output: { value: Response } }) => {
        return { ...locals, output };
    },
    // All the settings for apollo v3

and then in the graphql route:

+server.ts

import server from './_server';

const handler: RequestHandler = async (args) => {
  // Parsing of operationName, variables, queries etc.

  const response = await server.executeOperation(
        {
            http: operationName,
            operationName,
            variables,
            query: query,
        },
        { headers: request.headers, locals, output } as any
    ); 

  // Return the response as JSON...
   return new Response(JSON.stringify(response), {
        status: response.http?.status,
        headers: { 'Content-Type': 'application/json' },
    });
};

How would I migrate this code to Apollo server v4? I'm reading the docs, and it seems like I need "something" else to make this work. Thanks for your help.

[glasser]

Interesting that you were using server.executeOperation in AS3 — that method was mostly designed for testing, since it was explicitly the "doesn't really have the whole HTTP context" method. I'm not sure what you mean by http: operationName there...

Anyway, I think what you're looking for is the server.executeHTTPGraphQLRequest method, and I think this page in the docs should be informative. Note that some of it is specific to creating a generic handler that works with any schema/context; if you're building something just for your app you don't need to do the "multiple declarations of the function depending on whether or not you have a non-trivial context or not" thing.

Note that if what you build is generally usable by folks other than your own project, perhaps you want to publish a SvelteKit integration? We have GitHub and npm orgs for AS4 integrations over at https://github.com/apollo-server-integrations; let us know if you're interested and we can give you the appropriate permissions to publish your package in both places.

[glasser]

(I'm also not sure exactly what "// Parsing of operationName, variables, queries etc." means — assuming you're processing standard GraphQL-over-HTTP/JSON requests, just pass us a description of the HTTP request and we'll do all the parsing for you (that's honestly a big fraction of what Apollo Server does!).)

[alexbjorlig]

What we are doing today is maybe hard to understand without Sveltekit context, but here we go.
To support Odata, "normal" Graphql requests, form actions, etc. we have built this:

Benefits:

• Support for browser FORM content-types (so we can use simple browser forms)
• GraphQl requests that work without JS
• Interface with OData framework
• Deep integration with Sveltekit form actions
• Accept redirects with GraphQl requests (so we can have normal/expected HTTP behaviour)

Downsides

• None that we know off 🤔
• We have to "strip" out client directives

When we submit forms in Sveltekit, we do like this

html page with form

<form method="post" class="mt-12 sm:mx-auto sm:flex sm:max-w-lg">
    <input type="hidden" name="__query" value={print(removeClientDirective(UpdateSelf))} />
    <input type="hidden" name="__redirect" value="/onboarding/3" />
    <div class="min-w-0 flex-1 space-y-4">
        <label for="name" class="sr-only">Name</label>
        <input
            id="name"
            type="text"
            name="input.object.name"
            value={form?.values?.input.object.name ?? ''}
            placeholder="Name"
        />
        {#if form?.errors}
            <p class="badge badge-red mt-2 text-sm">{form.errors[0].message}</p>
        {/if}
        <button
            disabled={saving}
            type="submit"
        >
            {#if saving}
                <SpinnerAnimation />
                <span>Saving...</span>
            {:else}
                <span>Save and proceed</span>
            {/if}
        </button>
    </div>
</form>

Most of this was built by @AndreasHald - so I'm just pinning him here if you have more questions.

[glasser]

Wow, it seems like you've built your own GraphQL server from scratch! I'm not really sure what value you're getting from using Apollo Server specifically rather than graphql-js directly if you're going to skip all of our HTTP-related stuff, but if it works for you that's great — definitely not the normal approach though!

I encourage you to be incredibly careful if you're handling multipart/form-data or application/x-www-form-urlencoded content-types in your server, as handling those content types tend to make your server vulnerable to CSRF attacks. If you explicitly want HTML forms to work then you'll need to use old-school CSRF tokens to protect your users from situations where random websites can cause them to run mutations against your GraphQL server (at least if your server uses cookies).

[alexbjorlig]

Thanks for your reply. We are well protected against CSRF with TLS 1.3, SameSite=Lax and Sveltekit's build in CSRF protection.

By using the Apollo server this way (instead of graphql-js directly), would you not agree on the following benefits:

• Utilization of the Apollo Server plugin architecture
• Metrics reported to the apollo studio

Would it be possible to get these features without using apollo server?

[glasser]

Yes, I'm glad to hear you're getting value from that aspect of Apollo Server :)