Added custom headers to be passed to createQuery hook (#20402)

ref MOM-239

- for ActivityPub + Egg
- allow custom headers to be passed to createQuery hook in Admin X.
- this includes the ability to use it inside `createQueryWithId` hook.
- Added testing

apps/admin-x-framework/src/utils/api/hooks.ts

@@ -20,6 +20,7 @@ export interface Meta {
 interface QueryOptions<ResponseData> {
     dataType: string
     path: string
+    headers?: Record<string, string>;
     defaultSearchParams?: Record<string, string>;
     permissions?: string[];
     returnData?: (originalData: unknown) => ResponseData;
@@ -38,7 +39,7 @@ export const createQuery = <ResponseData>(options: QueryOptions<ResponseData>) =
     const result = useQuery<ResponseData>({
         enabled: options.permissions ? usePermission(options.permissions) : true,
         queryKey: [options.dataType, url],
-        queryFn: () => fetchApi(url),
+        queryFn: () => fetchApi(url, {...options}),
         ...query
     });
 
@@ -145,6 +146,7 @@ export const createQueryWithId = <ResponseData>(options: Omit<QueryOptions<Respo
 
 interface MutationOptions<ResponseData, Payload> extends Omit<QueryOptions<ResponseData>, 'dataType' | 'path'>, Omit<RequestOptions, 'body'> {
     path: (payload: Payload) => string;
+    headers?: Record<string, string>;
     body?: (payload: Payload) => FormData | object;
     searchParams?: (payload: Payload) => { [key: string]: string; };
     invalidateQueries?: { dataType: string; };

apps/admin-x-framework/test/unit/utils/api/hooks.test.tsx

@@ -60,12 +60,47 @@ describe('API hooks', function () {
                 expect(mock.calls.length).toBe(1);
                 expect(mock.calls[0]).toEqual(['http://localhost:3000/ghost/api/admin/test/', {
                     credentials: 'include',
+                    dataType: 'test',
                     headers: {
                         'app-pragma': 'no-cache',
                         'x-ghost-version': '5.x'
                     },
                     method: 'GET',
                     mode: 'cors',
+                    path: '/test/',
+                    signal: expect.any(AbortSignal)
+                }]);
+            });
+        });
+
+        it('can add custom headers', async function () {
+            await withMockFetch({
+                json: {test: 1}
+            }, async (mock) => {
+                const useTestQuery = createQuery({
+                    dataType: 'test',
+                    path: '/test/',
+                    headers: {'Content-Type': 'ALOHA'}
+                });
+
+                const {result} = renderHook(() => useTestQuery(), {wrapper});
+
+                await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+                expect(result.current.data).toEqual({test: 1});
+
+                expect(mock.calls.length).toBe(1);
+                expect(mock.calls[0]).toEqual(['http://localhost:3000/ghost/api/admin/test/', {
+                    credentials: 'include',
+                    dataType: 'test',
+                    headers: {
+                        'Content-Type': 'ALOHA',
+                        'app-pragma': 'no-cache',
+                        'x-ghost-version': '5.x'
+                    },
+                    method: 'GET',
+                    mode: 'cors',
+                    path: '/test/',
                     signal: expect.any(AbortSignal)
                 }]);
             });