Set header to SvelteApolloClient

[aliirsyaadn]

I have application with JWT authentication, and i want to set header after login. This is my code :

client.ts

import { InMemoryCache } from '@apollo/client/core'
import { SvelteApolloClient } from 'svelte-apollo-client'

export const client = SvelteApolloClient({
    uri: '/query',
    cache: new InMemoryCache(),
})

Admin.svelte

<script lang="ts">
    import { client } from '../utils/apollo/client'
    import { GET_ADMINS } from '../utils/query/queries'
    const authToken = "jwttoken";
    client.headers = {
        Authorization:
            `Bearer {authToken}`,
    }
    const admins = client.query(GET_ADMINS)
</script>

<div>
    <h1>Admin</h1>
    {#if admins}
        {#if $admins.loading}
            <h2>Loading</h2>
        {:else if $admins.error}
            <h2>{$admins.error.message}</h2>
        {:else}
            <ul>
                {#each $admins.data as admin}
                    <li>{admin.id} : {admin.username}</li>
                {/each}
            </ul>
        {/if}
    {/if}
</div>

How can i dynamically change the header Authorization?

[unlocomqx]

You'll need to pass in a custom fetch function which adds the header.

import { SvelteApolloClient } from "svelte-apollo-client";
import { HttpLink } from "@apollo/client/link";
import { InMemoryCache } from "@apollo/client/cache";
import merge from 'merge'

const link = new HttpLink({
  uri: "/graphql",
  fetch: authenticatedFetch(),
  fetchOptions: {
    credentials: "include",
  },
});

export const client = SvelteApolloClient({
  link,
  cache: new InMemoryCache(),
});

function authenticatedFetch() {
  return (uri, options) => {
   fetch(uri, merge(options, {
     headers: {
       Authorization:
         `Bearer {authToken}`,
     }
   }))
  }
}

[unlocomqx]

Better examples in the docs
https://www.apollographql.com/docs/react/networking/authentication/

[GeoDoX]

@unlocomqx Can you provide a full project example? I'm sure this is common enough that a full breakdown would really help as I am too struggling with setting the auth token. The apollo docs don't provide a relevant enough example to achieve this in sveltekit.

[unlocomqx]

Check the code here, it shows how to make an auth'd graphql request
https://github.com/unlocomqx/shopify-app-sveltekit/blob/main/src/lib/graphql/client.ts