Adding support for updating headers

[AlexanderBacklund]

Hi!

Is there a way to update the headers for the kitQl client? For now I just added a setter/adder method for the kitQl header. My goal is to login and add a jwt token to the header.

[jycouet]

You have multiple options today:

Option 1 (Cookies):

import { KitQLClient } from '@kitql/client';

export const kitQLClient = new KitQLClient({
	url: '.../graphql',
	credentials: 'include',
});

Options 2 (manual Authorization):

import { KitQLClient } from '@kitql/client';

export const kitQLClient = new KitQLClient({
	url: '.../graphql',
	headers: {
		Authorization: `Bearer ${TOKEN}`
	},
});

Are you looking for something else?

[AlexanderBacklund]

Thanks for the quick response!

Isn't both of these cases when initializing the client? What if you want to update the client and not create a new one?

[jycouet]

With option 1, you work with cookies.
Depending on cookies value you are logged in or not. (You don't need to reinitialize the client, you need to have the right cookie, and that can change over time 👍)

For option 2, yes, it's only once today.

You would like to be able to update headers globally only? and/or at query each request as well?

[AlexanderBacklund]

You would like to be able to update headers globally only? and/or at query each request as well?
I want to be able to input a JWT token to the header when a user successfully logs in. When the user logs out, I want to clear the autorization header.

[jycouet]

I'll add it in the coming days and let you check 👍

[jycouet]

@AlexanderBacklund what if I make headers public?
like this, in kitQLClient.ts you can:

import { KitQLClient} from '@kitql/client';

//cool stuff to have it typed 🤟
export type AppHeaders = {
	Authorization: `Bearer ${string}`;
};

const defaultHeaders: AppHeaders = null;

export const kitQLClient = new KitQLClient({
	url: `https://countries.trevorblades.com/graphql`,
	headersContentType: 'application/json',
	headers: defaultHeaders,
	logType: ['client', 'server', 'operationAndvariables'],
});

And in your code, do something like:

<script lang="ts">
	function updateHeaders() {
		(kitQLClient.headers as AppHeaders) = { Authorization: 'Bearer MY_TOKEN' };
	}
</script>

<button on:click={updateHeaders}>Update Headers</button>

Let me know

[AlexanderBacklund]

Hi again!

Yes, that is one way to do it (how I did it locally to continue my work) but personally I prefer getter and setter or do you see any drawbacks in doing it that way?

[jycouet]

Should be in 0.6.1 🥳