InvokeAI/invokeai/frontend/web/src/services/api/index.ts
psychedelicious e386b5dc53 feat(ui): api layer refactor
*migrate from `openapi-typescript-codegen` to `openapi-typescript` and `openapi-fetch`*

`openapi-typescript-codegen` is not very actively maintained - it's been over a year since the last update.
`openapi-typescript` and `openapi-fetch` are part of the actively maintained repo. key differences:

- provides a `fetch` client instead of `axios`, which means we need to be a bit more verbose with typing thunks
- fetch client is created at runtime and has a very nice typescript DX
- generates a single file with all types in it, from which we then extract individual types. i don't like how verbose this is, but i do like how it is more explicit.
- removed npm api generation scripts - now we have a single `typegen` script

overall i have more confidence in this new library.

*use nanostores for api base and token*

very simple reactive store for api base url and token. this was suggested in the `openapi-fetch` docs and i quite like the strategy.

*organise rtk-query api*

split out each endpoint (models, images, boards, boardImages) into their own api extensions. tidy!
2023-06-24 17:57:39 +10:00

45 lines
1.1 KiB
TypeScript

import {
BaseQueryFn,
FetchArgs,
FetchBaseQueryError,
createApi,
fetchBaseQuery,
} from '@reduxjs/toolkit/query/react';
import { FullTagDescription } from '@reduxjs/toolkit/dist/query/endpointDefinitions';
import { $authToken, $baseUrl } from 'services/api/client';
export const tagTypes = ['Board', 'Image', 'Model'];
export type ApiFullTagDescription = FullTagDescription<
(typeof tagTypes)[number]
>;
export const LIST_TAG = 'LIST';
const dynamicBaseQuery: BaseQueryFn<
string | FetchArgs,
unknown,
FetchBaseQueryError
> = async (args, api, extraOptions) => {
const baseUrl = $baseUrl.get();
const authToken = $authToken.get();
const rawBaseQuery = fetchBaseQuery({
baseUrl: `${baseUrl ?? ''}/api/v1`,
prepareHeaders: (headers) => {
if (authToken) {
headers.set('Authorization', `Bearer ${authToken}`);
}
return headers;
},
});
return rawBaseQuery(args, api, extraOptions);
};
export const api = createApi({
baseQuery: dynamicBaseQuery,
reducerPath: 'api',
tagTypes,
endpoints: () => ({}),
});