Authorization Header

[Deani1232]

I am attempting to use the React Query plugin. I have this system mostly setup, but I am not sure how I might add in an authorization header into the request? I did not find any relevant information on this subject in the docs.

Edit: I have marked the question as answered, but I think this would be a good feature request for the library!

[joserocha3]

You can use a custom fetch and supply the authorization header there.

https://zeus.graphqleditor.com/page/custom-fetch.html

[Deani1232]

Thank you.
Is there a way to supply this custom fetch to the useTypedMutation and useTypedQuery that are provided by the ReactQuery plugin for Zeus?

[joserocha3]

I wrapped the generated output. Here is a typescript version. The types and imports are a little different because I'm using it for vue-query but I just copied the react-query version.

import {
  ValueTypes,
  GraphQLTypes,
  InputType,
  Thunder,
  OperationOptions,
  chainOptions,
} from '#shared/generated/zeus'
import { useQuery as useVueQuery } from 'vue-query'
import type { UseQueryOptions } from 'vue-query'

export function useQuery<
  O extends 'query_root',
  TData extends ValueTypes[O],
  TResult = InputType<GraphQLTypes[O], TData>
>(
  queryKey: string | unknown[],
  query: (() => TData | ValueTypes[O]) | TData | ValueTypes[O],
  options?: Omit<UseQueryOptions<TResult>, 'queryKey' | 'queryFn'>,
  zeusOptions?: OperationOptions,
  host = 'https://yourpai.com/v1/graphql',
  hostOptions: chainOptions[1] = {}
) {
  type HasuraData = { data: TResult }
  type HasuraError = { errors?: { message: string; extensions: { code: string; path: string } }[] }

  return useVueQuery<TResult>(
    queryKey,
    () => {
      const thunder = Thunder(async (query) => {
        const response = await $fetch<HasuraData>(host, {
          method: 'POST',
          body: { query },
          headers: {
            Authorization: `Bearer ${await useFirebase().value.auth.currentUser.getIdToken()}`,
          },
          ...hostOptions,
        })

        const hasuraError = response as HasuraError
        if (hasuraError.errors?.[0].message) {
          throw hasuraError.errors?.[0].message
        }

        return response.data
      })

      return thunder('query')(
        typeof query === 'function' ? query() : query,
        zeusOptions
      ) as Promise<TResult>
    },
    {
      onError: (error: any) => {
        useNotification(error, { type: 'error' })
      },
      ...options,
    }
  )
}

[Deani1232]

I will look into writing something like this,
Thank you!