contra / graphql-helix

A highly evolved GraphQL HTTP Server 🧬
graphql-helix.vercel.app
MIT License
829 stars 49 forks source link

Best approach to set headers through helix resolver in SvelteKit #45

Open ibilux opened 3 years ago

ibilux commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

AndreasHald commented 3 years ago

@ibilux do you have graphql-helix working with svelte-kit? I can get it working in graphql-helix@1.2.3 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 commented 3 years ago

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

AndreasHald commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

@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.