From 7f855dca3ce11f160081a8d2c331953b96d4e7c8 Mon Sep 17 00:00:00 2001 From: Parkreiner Date: Thu, 19 Oct 2023 18:55:23 +0000 Subject: [PATCH 1/3] refactor: simplify metadata patterns --- site/src/api/queries/appearance.ts | 16 +++++----------- site/src/api/queries/buildInfo.ts | 16 +++++----------- site/src/api/queries/entitlements.ts | 11 ++++++----- site/src/api/queries/experiments.ts | 14 ++++---------- .../components/Dashboard/DashboardProvider.tsx | 9 ++++----- 5 files changed, 24 insertions(+), 42 deletions(-) diff --git a/site/src/api/queries/appearance.ts b/site/src/api/queries/appearance.ts index 1e891deb59619..10366b4382d72 100644 --- a/site/src/api/queries/appearance.ts +++ b/site/src/api/queries/appearance.ts @@ -6,18 +6,12 @@ import { getMetadataAsJSON } from "utils/metadata"; const initialAppearanceData = getMetadataAsJSON("appearance"); const appearanceConfigKey = ["appearance"] as const; -export const appearance = (queryClient: QueryClient) => { +export const appearance = (): UseQueryOptions => { return { - queryKey: appearanceConfigKey, - queryFn: async () => { - const cachedData = queryClient.getQueryData(appearanceConfigKey); - if (cachedData === undefined && initialAppearanceData !== undefined) { - return initialAppearanceData; - } - - return API.getAppearance(); - }, - } satisfies UseQueryOptions; + queryKey: ["appearance"], + initialData: initialAppearanceData, + queryFn: () => API.getAppearance(), + }; }; export const updateAppearance = (queryClient: QueryClient) => { diff --git a/site/src/api/queries/buildInfo.ts b/site/src/api/queries/buildInfo.ts index c10b458a67fcf..58e61575ef057 100644 --- a/site/src/api/queries/buildInfo.ts +++ b/site/src/api/queries/buildInfo.ts @@ -1,4 +1,4 @@ -import { QueryClient, type UseQueryOptions } from "react-query"; +import { type UseQueryOptions } from "react-query"; import { type BuildInfoResponse } from "api/typesGenerated"; import * as API from "api/api"; import { getMetadataAsJSON } from "utils/metadata"; @@ -6,16 +6,10 @@ import { getMetadataAsJSON } from "utils/metadata"; const initialBuildInfoData = getMetadataAsJSON("build-info"); const buildInfoKey = ["buildInfo"] as const; -export const buildInfo = (queryClient: QueryClient) => { +export const buildInfo = (): UseQueryOptions => { return { queryKey: buildInfoKey, - queryFn: async () => { - const cachedData = queryClient.getQueryData(buildInfoKey); - if (cachedData === undefined && initialBuildInfoData !== undefined) { - return initialBuildInfoData; - } - - return API.getBuildInfo(); - }, - } satisfies UseQueryOptions; + initialData: initialBuildInfoData, + queryFn: () => API.getBuildInfo(), + }; }; diff --git a/site/src/api/queries/entitlements.ts b/site/src/api/queries/entitlements.ts index 271d0bbf821ee..6cb0bf9c2572e 100644 --- a/site/src/api/queries/entitlements.ts +++ b/site/src/api/queries/entitlements.ts @@ -1,15 +1,16 @@ -import { QueryClient } from "react-query"; +import { QueryClient, UseQueryOptions } from "react-query"; import * as API from "api/api"; import { Entitlements } from "api/typesGenerated"; import { getMetadataAsJSON } from "utils/metadata"; -const ENTITLEMENTS_QUERY_KEY = ["entitlements"]; +const initialEntitlementsData = getMetadataAsJSON("entitlements"); +const ENTITLEMENTS_QUERY_KEY = ["entitlements"] as const; -export const entitlements = () => { +export const entitlements = (): UseQueryOptions => { return { queryKey: ENTITLEMENTS_QUERY_KEY, - queryFn: async () => - getMetadataAsJSON("entitlements") ?? API.getEntitlements(), + queryFn: () => API.getEntitlements(), + initialData: initialEntitlementsData, }; }; diff --git a/site/src/api/queries/experiments.ts b/site/src/api/queries/experiments.ts index 3d3618819fe77..aa12d5152411b 100644 --- a/site/src/api/queries/experiments.ts +++ b/site/src/api/queries/experiments.ts @@ -1,22 +1,16 @@ import * as API from "api/api"; import { getMetadataAsJSON } from "utils/metadata"; import { type Experiments } from "api/typesGenerated"; -import { QueryClient, type UseQueryOptions } from "react-query"; +import { type UseQueryOptions } from "react-query"; const initialExperimentsData = getMetadataAsJSON("experiments"); const experimentsKey = ["experiments"] as const; -export const experiments = (queryClient: QueryClient) => { +export const experiments = (): UseQueryOptions => { return { queryKey: experimentsKey, - queryFn: async () => { - const cachedData = queryClient.getQueryData(experimentsKey); - if (cachedData === undefined && initialExperimentsData !== undefined) { - return initialExperimentsData; - } - - return API.getExperiments(); - }, + initialData: initialExperimentsData, + queryFn: () => API.getExperiments(), } satisfies UseQueryOptions; }; diff --git a/site/src/components/Dashboard/DashboardProvider.tsx b/site/src/components/Dashboard/DashboardProvider.tsx index a0bd176178a1a..5708dc25aa712 100644 --- a/site/src/components/Dashboard/DashboardProvider.tsx +++ b/site/src/components/Dashboard/DashboardProvider.tsx @@ -1,4 +1,4 @@ -import { useQuery, useQueryClient } from "react-query"; +import { useQuery } from "react-query"; import { buildInfo } from "api/queries/buildInfo"; import { experiments } from "api/queries/experiments"; import { entitlements } from "api/queries/entitlements"; @@ -39,11 +39,10 @@ export const DashboardProviderContext = createContext< >(undefined); export const DashboardProvider: FC = ({ children }) => { - const queryClient = useQueryClient(); - const buildInfoQuery = useQuery(buildInfo(queryClient)); + const buildInfoQuery = useQuery(buildInfo()); const entitlementsQuery = useQuery(entitlements()); - const experimentsQuery = useQuery(experiments(queryClient)); - const appearanceQuery = useQuery(appearance(queryClient)); + const experimentsQuery = useQuery(experiments()); + const appearanceQuery = useQuery(appearance()); const isLoading = !buildInfoQuery.data || From 3ca43645bfe8c2e00db0bc8ef8ee2a57e63f667f Mon Sep 17 00:00:00 2001 From: Parkreiner Date: Thu, 19 Oct 2023 18:58:57 +0000 Subject: [PATCH 2/3] fix: add return type to me factory --- site/src/api/queries/users.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts index 8f335c6525f7b..b04370ab634bc 100644 --- a/site/src/api/queries/users.ts +++ b/site/src/api/queries/users.ts @@ -91,7 +91,7 @@ export const authMethods = () => { const initialUserData = getMetadataAsJSON("user"); -export const me = () => { +export const me = (): UseQueryOptions => { return { queryKey: ["me"], initialData: initialUserData, From 3ef592c5399c857983d7479c492643fe36713603 Mon Sep 17 00:00:00 2001 From: Parkreiner Date: Thu, 19 Oct 2023 19:42:34 +0000 Subject: [PATCH 3/3] fix: make sure query key for me is always defined at type level --- site/src/api/queries/users.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts index b04370ab634bc..2b6900df13ac8 100644 --- a/site/src/api/queries/users.ts +++ b/site/src/api/queries/users.ts @@ -91,7 +91,9 @@ export const authMethods = () => { const initialUserData = getMetadataAsJSON("user"); -export const me = (): UseQueryOptions => { +export const me = (): UseQueryOptions & { + queryKey: NonNullable["queryKey"]>; +} => { return { queryKey: ["me"], initialData: initialUserData,