Best approach to set headers through helix resolver in SvelteKit

[ibilux]

Hello, I want to know what is the best approach to set (or return) headers (cookies to be exact) through helix resolver in SvelteKit? After use login I need to set the jwt and session information in cookies. You can see the Mutation code in here: https://github.com/MirrorBytes/phorm-kit-vercel/blob/283b0c4036db13b799f22cd2b85a3f89ffab6e1b/src/resolvers/user.ts#L53 And the jwt is generated here: https://github.com/MirrorBytes/phorm-kit-vercel/blob/283b0c4036db13b799f22cd2b85a3f89ffab6e1b/src/entities/user.ts#L98 I have noticed that processRequest() function return a result with headers in here: https://github.com/MirrorBytes/phorm-kit-vercel/blob/283b0c4036db13b799f22cd2b85a3f89ffab6e1b/src/routes/graphql.ts#L37

Is there is a way to access the header when processing a request (or resolving a schema) ? Or can you suggest me a good a approach to do this ?

Thank you.

[benbender]

I'm not sure if that's the best approach, but it's what works for me atm - so here is my current solution...

I first had a look at the processRequest()-method to see if there is some way to hook into it's result.headers directly. But as it turns out, headers is simply initiated as an empty array. So no hook there... What I did instead is to add a response-object with an empty "headers"-array to my context, which can be accessed inside my resolvers. This context is available in the result of the actual processRequest()-call and can be used to initialize the former empty headers-array. Be aware that those headers could be overwritten later in the flow and if this might be a problem, it would need to be handled...

So my (simplified) code looks something like the following:

const respond = async (request: Request): Promise<Response> => {
  // ...
  // Extract the GraphQL parameters from the request
  const parameters = getGraphQLParameters(request);
  const result = await processRequest({
    ...parameters,
    request,
    schema,
    contextFactory: () => {
      return {
        request,
        response: {
          headers: {},
        },
        // ...
      };
    },
  });

  if (result.type === "RESPONSE") {
    const headers: Headers = result.context?.response.headers || {};

    for (const { name, value } of result.headers) {
      headers[name] = value;
    }

    return {
      headers,
      body: result.payload,
      status: result.status,
    };
  }
  // ...
};

[ibilux]

Thank you @benbender , I have been thinking about doing this. I just needed another opinion on doing this. Thank you for the confirmation.

[AndreasHald]

@ibilux do you have graphql-helix working with svelte-kit? I can get it working in [email protected] but the latest 1.8 throws an error when starting svelte-kit Failed to resolve entry for package "graphql-helix". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." entry in "graphql-helix" package

[benbender]

@AndreasHald Simply use https://github.com/PabloSzx/graphql-ez/tree/main/examples/sveltekit - which integrates SvelteKit, Graphql-Helix & Envelop.

[AndreasHald]

@benbender seems interesting, but for now I'd like to try and get something working without a framework and build it from scratch. Do you happen to know the issue I'm having?

[benbender]

@AndreasHald yes and no. The bundling process in sveltekit and vite is somewhat brittle atm. They are still figuring out how to handle all edge- and legacy-cases in their esm-packages-only-strategy. This leads to all sorts of problems with various packages in between and is changing between versions. So yes, I've encountered this (broad) class of problems, but not exactly your specific case (as I'm using graphql-ez, as said).

[ibilux]

@AndreasHald Yes, graphql-helix is working with svelte-kit for me. You can use this as reference, or use it as and svelte-add : https://github.com/svelte-add/graphql-server

[ibilux]

@benbender ~~did you try using Websockets with svelte-kit ?~~ Websockets is not supported yet : https://github.com/PabloSzx/graphql-ez/blob/d5398248d9972d7d304c5ef87db898ecfbb5a5b4/packages/sveltekit/main/src/index.ts#L200

[AndreasHald]

@ibilux Ah I see, that reference is using 1.2.3 however, do you have it working using the latest version of graphql-helix?

[PabloSzx]

@benbender ~did you try using Websockets with svelte-kit ?~ Websockets is not supported yet : https://github.com/PabloSzx/graphql-ez/blob/d5398248d9972d7d304c5ef87db898ecfbb5a5b4/packages/sveltekit/main/src/index.ts#L200

Check https://github.com/sveltejs/kit/issues/1563 and https://github.com/sveltejs/kit/pull/2212, those are the reason PUSH and MULTIPART_RESPONSE are not supported

[ibilux]

@PabloSzx Yes, PUSH and MUTLIPART_RESPONSE are not supported yet in svelte-kit, hence, it can't be implemented to Graphql-Helix or graphql-ez. However, you can use this workaround trick : https://github.com/sveltejs/kit/pull/2051

[ibilux]

@AndreasHald I'm using version 1.7.0 it's working fine (it was released 2 months ago). PS: latest version is 1.8.0, but it should work fine.