Type authenticated query correctly

src/hooks/api/authenticated-query-v2.ts

@@ -0,0 +1,154 @@
+import { useRouter } from 'next/router';
+import { GetServerSidePropsContext } from 'next/types';
+import { Cookies } from 'react-cookie';
+import {
+  FetchQueryOptions,
+  QueryClient,
+  QueryFunctionContext,
+  QueryKey,
+  useQuery,
+  UseQueryOptions,
+} from 'react-query';
+
+import { FetchError } from '@/utils/fetchFromApi';
+import { isTokenValid } from '@/utils/isTokenValid';
+
+import { useCookiesWithOptions } from '../useCookiesWithOptions';
+import { createHeaders, useHeaders } from './useHeaders';
+
+type QueryArguments = Record<string, string>;
+
+type GenerateQueryKeyArguments = {
+  queryKey: QueryKey;
+  queryArguments: QueryArguments;
+};
+
+type GeneratedQueryKey = readonly [QueryKey, QueryArguments];
+
+type AuthenticatedQueryFunctionContext<TQueryArguments = unknown> =
+  QueryFunctionContext<GeneratedQueryKey> & {
+    headers: HeadersInit;
+    queryArguments?: TQueryArguments;
+  };
+
+type ServerSideOptions = {
+  req: GetServerSidePropsContext['req'];
+  queryClient: QueryClient;
+};
+
+type PrefetchAuthenticatedQueryOptions<TQueryFnData> = {
+  queryArguments?: QueryArguments;
+} & ServerSideOptions &
+  FetchQueryOptions<TQueryFnData, FetchError, TQueryFnData, QueryKey>;
+
+type UseAuthenticatedQueryOptions<
+  TQueryFnData,
+  TQueryArguments = QueryArguments,
+> = {
+  queryArguments?: TQueryArguments;
+} & Omit<
+  UseQueryOptions<TQueryFnData, FetchError, TQueryFnData, QueryKey>,
+  'queryFn'
+> & {
+    queryFn: (
+      context: AuthenticatedQueryFunctionContext,
+    ) => TQueryFnData | Promise<TQueryFnData>;
+  };
+
+const isUnAuthorized = (status: number) => [401, 403].includes(status);
+
+const generateQueryKey = ({
+  queryKey,
+  queryArguments,
+}: GenerateQueryKeyArguments): GeneratedQueryKey => {
+  if (Object.keys(queryArguments ?? {}).length > 0) {
+    return [queryKey, queryArguments];
+  }
+
+  return [queryKey, {}];
+};
+
+type GetPreparedOptionsArguments<TQueryFnData> = {
+  options: UseAuthenticatedQueryOptions<TQueryFnData>;
+  isTokenPresent: boolean;
+  headers: HeadersInit;
+};
+
+const getPreparedOptions = <TQueryFnData = unknown>({
+  options,
+  isTokenPresent,
+  headers,
+}: GetPreparedOptionsArguments<TQueryFnData>) => {
+  const { queryKey, queryArguments, queryFn, ...restOptions } = options;
+  const generatedQueryKey = generateQueryKey({
+    queryKey,
+    queryArguments,
+  });
+
+  return {
+    ...restOptions,
+    queryKey: generatedQueryKey,
+    queryArguments,
+    queryFn: (context) => queryFn({ ...context, queryArguments, headers }),
+    ...('enabled' in restOptions && {
+      enabled: isTokenPresent && !!restOptions.enabled,
+    }),
+  };
+};
+
+const prefetchAuthenticatedQuery = async <TQueryFnData = unknown>({
+  req,
+  queryClient,
+  ...options
+}: PrefetchAuthenticatedQueryOptions<TQueryFnData>) => {
+  if (typeof window !== 'undefined') {
+    throw new Error('Only use prefetchAuthenticatedQuery in server-side code');
+  }
+
+  const cookies = new Cookies(req?.headers?.cookie);
+  const headers = createHeaders(cookies.get('token'));
+
+  const { queryKey, queryFn } = getPreparedOptions<TQueryFnData>({
+    // @ts-expect-error
+    options,
+    isTokenPresent: isTokenValid(cookies.get('token')),
+    headers,
+  });
+
+  return queryClient.fetchQuery<TQueryFnData, FetchError>(queryKey, queryFn);
+};
+
+const useAuthenticatedQuery = <TQueryFnData = unknown>(
+  options: UseAuthenticatedQueryOptions<TQueryFnData>,
+) => {
+  const headers = useHeaders();
+  const { cookies, removeAuthenticationCookies } = useCookiesWithOptions([
+    'token',
+  ]);
+  const router = useRouter();
+
+  const preparedOptions = getPreparedOptions({
+    options,
+    isTokenPresent: isTokenValid(cookies.token),
+    headers,
+  });
+
+  const result = useQuery(preparedOptions);
+
+  if (
+    isUnAuthorized(result?.error?.status) &&
+    !router.asPath.startsWith('/login') &&
+    router.asPath !== '/[...params]'
+  ) {
+    removeAuthenticationCookies();
+
+    router.push('/login');
+
+    return;
+  }
+
+  return result;
+};
+
+export { prefetchAuthenticatedQuery, useAuthenticatedQuery };
+export type { AuthenticatedQueryFunctionContext };

src/hooks/api/authenticated-query.ts

@@ -1,16 +1,18 @@
 import { isEqual } from 'lodash';
 import flatten from 'lodash/flatten';
-import type { NextApiRequest } from 'next';
 import { useRouter } from 'next/router';
+import { GetServerSidePropsContext } from 'next/types';
 import { useCallback } from 'react';
 import { Cookies } from 'react-cookie';
 import {
   MutationFunction,
   QueryClient,
+  useMutation,
+  useQueries,
+  useQuery,
   useQueryClient,
   UseQueryResult,
 } from 'react-query';
-import { useMutation, useQueries, useQuery } from 'react-query';
 
 import { useCookiesWithOptions } from '@/hooks/useCookiesWithOptions';
 import type { CalendarSummaryFormat } from '@/utils/createEmbededCalendarSummaries';
@@ -21,7 +23,7 @@ import { isTokenValid } from '@/utils/isTokenValid';
 import { createHeaders, useHeaders } from './useHeaders';
 
 type ServerSideQueryOptions = {
-  req?: NextApiRequest;
+  req?: GetServerSidePropsContext['req'];
   queryClient?: QueryClient;
 };
 

src/hooks/api/useHeaders.js → src/hooks/api/useHeaders.ts

@@ -2,7 +2,10 @@ import getConfig from 'next/config';
 
 import { useCookiesWithOptions } from '../useCookiesWithOptions';
 
-const createHeaders = (token, extraHeaders) => {
+const createHeaders = (
+  token: string,
+  extraHeaders: HeadersInit = {},
+): HeadersInit => {
   const { publicRuntimeConfig } = getConfig();
 
   return {

src/hooks/api/user.ts

@@ -1,13 +1,13 @@
 import jwt_decode from 'jwt-decode';
-import getConfig from 'next/config';
 
 import { FetchError, fetchFromApi, isErrorObject } from '@/utils/fetchFromApi';
 
 import { Cookies, useCookiesWithOptions } from '../useCookiesWithOptions';
+import { ServerSideQueryOptions } from './authenticated-query';
 import {
-  ServerSideQueryOptions,
-  useAuthenticatedQuery,
-} from './authenticated-query';
+  prefetchAuthenticatedQuery,
+  useAuthenticatedQuery as useAuthenticatedQueryV2,
+} from './authenticated-query-v2';
 
 type User = {
   sub: string;
@@ -45,7 +45,7 @@ const getUser = async (cookies: Cookies) => {
     throw new FetchError(401, 'Unauthorized');
   }
 
-  const userInfo = jwt_decode(cookies.idToken) as User;
+  const userInfo = jwt_decode<User>(cookies.idToken);
   const decodedAccessToken = jwt_decode(cookies.token) as decodedAccessToken;
 
   if (Date.now() >= decodedAccessToken.exp * 1000) {
@@ -58,7 +58,7 @@ const getUser = async (cookies: Cookies) => {
 const useGetUserQuery = () => {
   const { cookies } = useCookiesWithOptions(['idToken']);
 
-  return useAuthenticatedQuery({
+  return useAuthenticatedQueryV2({
     queryKey: ['user'],
     queryFn: () => getUser(cookies),
   });
@@ -70,7 +70,7 @@ const useGetUserQueryServerSide = (
 ) => {
   const cookies = req.cookies;
 
-  return useAuthenticatedQuery({
+  return prefetchAuthenticatedQuery({
     req,
     queryClient,
     queryKey: ['user'],
@@ -82,19 +82,20 @@ const useGetUserQueryServerSide = (
 const getPermissions = async ({ headers }) => {
   const res = await fetchFromApi({
     path: '/user/permissions/',
-    options: {
-      headers,
-    },
+    options: { headers },
   });
+
   if (isErrorObject(res)) {
     // eslint-disable-next-line no-console
-    return console.error(res);
+    console.error(res);
+    return;
   }
-  return await res.json();
+
+  return (await res.json()) as string[];
 };
 
 const useGetPermissionsQuery = (configuration = {}) =>
-  useAuthenticatedQuery({
+  useAuthenticatedQueryV2({
     queryKey: ['user', 'permissions'],
     queryFn: getPermissions,
     ...configuration,
@@ -107,15 +108,18 @@ const getRoles = async ({ headers }) => {
       headers,
     },
   });
+
   if (isErrorObject(res)) {
     // eslint-disable-next-line no-console
-    return console.error(res);
+    console.error(res);
+    return;
   }
-  return await res.json();
+
+  return (await res.json()) as any[];
 };
 
 const useGetRolesQuery = (configuration = {}) =>
-  useAuthenticatedQuery({
+  useAuthenticatedQueryV2({
     queryKey: ['user', 'roles'],
     queryFn: getRoles,
     ...configuration,

src/hooks/useFeatureFlag.ts

@@ -80,3 +80,5 @@ export {
   isFeatureFlagEnabledInCookies,
   useFeatureFlag,
 };
+
+export type { FeatureFlagName };