add project-id header to requests

This commit is contained in:
Mary Hipp 2023-08-02 09:46:29 -04:00 committed by psychedelicious
parent a6f9396a30
commit 5c9787c145
3 changed files with 24 additions and 5 deletions

View File

@ -13,7 +13,7 @@ import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares';
import Loading from '../../common/components/Loading/Loading';
import { Middleware } from '@reduxjs/toolkit';
import { $authToken, $baseUrl } from 'services/api/client';
import { $authToken, $baseUrl, $projectId } from 'services/api/client';
import { socketMiddleware } from 'services/events/middleware';
import '../../i18n';
import { AddImageToBoardContextProvider } from '../contexts/AddImageToBoardContext';
@ -37,6 +37,7 @@ const InvokeAIUI = ({
config,
headerComponent,
middleware,
projectId,
}: Props) => {
useEffect(() => {
// configure API client token
@ -49,6 +50,11 @@ const InvokeAIUI = ({
$baseUrl.set(apiUrl);
}
// configure API client project header
if (apiUrl) {
$projectId.set(projectId);
}
// reset dynamically added middlewares
resetMiddlewares();
@ -68,8 +74,9 @@ const InvokeAIUI = ({
// Reset the API client token and base url on unmount
$baseUrl.set(undefined);
$authToken.set(undefined);
$projectId.set(undefined);
};
}, [apiUrl, token, middleware]);
}, [apiUrl, token, middleware, projectId]);
return (
<React.StrictMode>

View File

@ -16,6 +16,11 @@ export const $authToken = atom<string | undefined>();
*/
export const $baseUrl = atom<string | undefined>();
/**
* The optional project-id header.
*/
export const $projectId = atom<string | undefined>();
/**
* Autogenerated, type-safe fetch client for the API. Used when RTK Query is not an option.
* Dynamically updates when the token or base url changes.
@ -24,9 +29,12 @@ export const $baseUrl = atom<string | undefined>();
* @example
* const { get, post, del } = $client.get();
*/
export const $client = computed([$authToken, $baseUrl], (authToken, baseUrl) =>
export const $client = computed([$authToken, $baseUrl, $projectId], (authToken, baseUrl, projectId) =>
createClient<paths>({
headers: authToken ? { Authorization: `Bearer ${authToken}` } : {},
headers: {
...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),
...(projectId ? { "project-id": projectId } : {})
},
// do not include `api/v1` in the base url for this client
baseUrl: `${baseUrl ?? ''}`,
})

View File

@ -6,7 +6,7 @@ import {
createApi,
fetchBaseQuery,
} from '@reduxjs/toolkit/query/react';
import { $authToken, $baseUrl } from 'services/api/client';
import { $authToken, $baseUrl, $projectId } from 'services/api/client';
export const tagTypes = [
'Board',
@ -30,6 +30,7 @@ const dynamicBaseQuery: BaseQueryFn<
> = async (args, api, extraOptions) => {
const baseUrl = $baseUrl.get();
const authToken = $authToken.get();
const projectId = $projectId.get();
const rawBaseQuery = fetchBaseQuery({
baseUrl: `${baseUrl ?? ''}/api/v1`,
@ -37,6 +38,9 @@ const dynamicBaseQuery: BaseQueryFn<
if (authToken) {
headers.set('Authorization', `Bearer ${authToken}`);
}
if (projectId) {
headers.set("project-id", projectId)
}
return headers;
},