Tips#

Helper Widget: `<KitQLInfo ...>`#

Everywhere, you can use:

<script lang="ts">
  import { KitQLInfo } from '@kitql/all-in'
</script>

<!-- you will have a nice popup like in the screenshot below 😉 -->
<KitQLInfo store={MyStore} />

Headers#

In your kitqlClient.ts you should create your own AppHeaders type, and use it when creating your new KitQLClient.

import { KitQLClient } from '@kitql/client'

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

export const kitQLClient = new KitQLClient<AppHeaders>({
  url: `https://countries.trevorblades.com/graphql`
})

Then you can

// Get
kitQLClient.getHeaders()

// Set
kitQLClient.setHeaders({ Authorization: 'Bearer MY_TOKEN' })

Credential#

In your kitqlClient.ts you can set credentials:

More info there: https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials

export const kitQLClient = new KitQLClient({
  url: `https://countries.trevorblades.com/graphql`,
  credentials: 'omit' // | 'same-origin' | 'include'
})

Tips#

Helper Widget: <KitQLInfo ...>#

Headers#

Credential#

Helper Widget: `<KitQLInfo ...>`#