From 4839d7f167efed9e5d03c52465dfbc95adadb276 Mon Sep 17 00:00:00 2001 From: Avram Walden Date: Wed, 2 Oct 2024 17:34:44 -0700 Subject: [PATCH 1/3] fix: fixes some query issues --- .../Layouts/Providers/QueryProvider.tsx | 2 +- app/frontend/queries/controls/index.ts | 28 +++++++++-- app/frontend/queries/index.ts | 48 ++++++++++++------- app/frontend/queries/queryKeys.ts | 23 +++++++++ app/frontend/queries/users/index.ts | 15 +++--- 5 files changed, 88 insertions(+), 28 deletions(-) create mode 100644 app/frontend/queries/queryKeys.ts diff --git a/app/frontend/Layouts/Providers/QueryProvider.tsx b/app/frontend/Layouts/Providers/QueryProvider.tsx index de5e4b0..59bc564 100644 --- a/app/frontend/Layouts/Providers/QueryProvider.tsx +++ b/app/frontend/Layouts/Providers/QueryProvider.tsx @@ -8,7 +8,7 @@ interface QueryProviderProps { const queryClient = new QueryClient() -const isDev = process.env.NODE_ENV && process?.env?.NODE_ENV === 'development' +const isDev = false // process.env.NODE_ENV && process?.env?.NODE_ENV === 'development' const QueryProvider = ({ children }: QueryProviderProps) => { return ( diff --git a/app/frontend/queries/controls/index.ts b/app/frontend/queries/controls/index.ts index 9d2feed..d9088f7 100644 --- a/app/frontend/queries/controls/index.ts +++ b/app/frontend/queries/controls/index.ts @@ -1,12 +1,12 @@ -import { useQuery } from '@tanstack/react-query' +import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query' import { Routes } from '@/lib' import axios from 'axios' import { ComboboxData } from '@mantine/core' -import { type ReactQueryFunction } from '..' +import { type ReactQueryFunction, type ReactMutationFunction } from '..' export const useGetControl: ReactQueryFunction = ({ slug }, options) => { return useQuery({ - queryKey: [`command/${slug}`], + queryKey: [`control/${slug}`], queryFn: async () => { const res = await axios.get(Routes.apiControl(slug)) return res.data @@ -17,7 +17,7 @@ export const useGetControl: ReactQueryFunction = (options) => { return useQuery({ - queryKey: ['commands'], + queryKey: ['controls'], queryFn: async () => { const res = await axios.get(Routes.apiControls()) return res.data @@ -25,3 +25,23 @@ export const useGetControls: ReactQueryFunction = (opt ...options, }) } + +export const useCreateControl: ReactMutationFunction< + Schema.ControlsFormData & { type: string }, + Schema.ControlsShow +> = ({ options }) => { + const queryClient = useQueryClient() + + return useMutation({ + mutationFn: async ({ type }) => { + const res = await axios.post(Routes.apiControls(), type) + return res.data + }, + mutationKey: ['controls'], + ...options, + onSuccess: (data, variables) => { + queryClient.invalidateQueries({ queryKey: ['controls'] }) + options?.onSuccess?.(data, variables) + }, + }) +} diff --git a/app/frontend/queries/index.ts b/app/frontend/queries/index.ts index e0d5dc0..1d77d15 100644 --- a/app/frontend/queries/index.ts +++ b/app/frontend/queries/index.ts @@ -5,34 +5,48 @@ import { type UseMutationResult, } from '@tanstack/react-query' -interface LimitedQueryOptions extends Omit, 'queryKey'|'queryFn'> {} +/** + * Query types + */ + +interface LimitedQueryOptions extends Omit, 'queryKey'|'queryFn'> {} -type ReactQueryFunctionBasic = (options?: LimitedQueryOptions) => UseQueryResult; -type ReactQueryFunctionWithParams> = (params: P, options?: LimitedQueryOptions) => UseQueryResult; +type ReactQueryFunctionBasic = (options?: LimitedQueryOptions) => UseQueryResult +type ReactQueryFunctionWithParams> = (params: TParams, options?: LimitedQueryOptions) => UseQueryResult -export type ReactQueryFunction = - P extends undefined - ? ReactQueryFunctionBasic - : P extends Record - ? ReactQueryFunctionWithParams +export type ReactQueryFunction = + TParams extends undefined + ? ReactQueryFunctionBasic + : TParams extends Record + ? ReactQueryFunctionWithParams : never; /** * Mutation types */ -interface LimitedMutationOptions extends Omit, 'mutationKey'|'onSuccess'> { - onSuccess?: (data: T, variables: P) => void +interface LimitedMutationOptions extends Omit, 'mutationKey'|'onSuccess'> { + onSuccess?: (data: TReturnData, variables: TVariables) => void } export type ReactMutationFunction< - T, - P extends Record, - M extends Record -> = ( - params: P, - options?: LimitedMutationOptions -) => UseMutationResult; + TMutationVariables, + TReturnData, + TParams = undefined, + TError = unknown +> = TParams extends undefined + ? ({ + options + }: { + options: LimitedMutationOptions + }) => UseMutationResult + : ({ + params, + options, + }: { + params: TParams, + options?: LimitedMutationOptions + }) => UseMutationResult /** * Folder exports diff --git a/app/frontend/queries/queryKeys.ts b/app/frontend/queries/queryKeys.ts new file mode 100644 index 0000000..ccf0c61 --- /dev/null +++ b/app/frontend/queries/queryKeys.ts @@ -0,0 +1,23 @@ +const queryKeys = { + commands: { + root: ['commands'] as const, + detail: (slug: string) => [...queryKeys.commands.root, slug] as const, + payloadTypes: ['commands', 'payloadTypes'] as const, + }, + controls: { + root: ['controls'] as const, + detail: (slug: string) => [...queryKeys.controls.root, slug] as const, + }, + protocols: { + root: ['protocols'] as const, + detail: (slug: string) => [...queryKeys.protocols.root, slug] as const, + options: ['protocols', 'options'] as const, + }, + servers: { + root: ['servers'] as const, + detail: (slug: string) => [...queryKeys.servers.root, slug] as const, + options: ['servers', 'options'] as const, + }, +} + +export default queryKeys diff --git a/app/frontend/queries/users/index.ts b/app/frontend/queries/users/index.ts index 9eea214..3650d55 100644 --- a/app/frontend/queries/users/index.ts +++ b/app/frontend/queries/users/index.ts @@ -40,15 +40,17 @@ type UserTablePreferencesParams = { } export const useUpdateUserTablePreferences: ReactMutationFunction< + UserTablePreferencesParams, Schema.User, - { id: string|number }, - UserTablePreferencesParams -> = ( + { id: string|number } +> = ({ params, options, -) => { +}) => { const queryClient = useQueryClient() + const queryKey = ['user', params.id, 'table_preferences'] + return useMutation({ mutationFn: async ({ id, preferences }) => { const res = await axios.patch(Routes.apiUpdateTablePreferences(id), { @@ -59,11 +61,12 @@ export const useUpdateUserTablePreferences: ReactMutationFunction< } return res.data }, - mutationKey: ['user', params.id, 'table_preferences'], + mutationKey: queryKey, ...options, onSuccess: (data, variables) => { - queryClient.invalidateQueries({ queryKey: ['user', params.id, 'table_preferences'] }) + queryClient.invalidateQueries({ queryKey }) options?.onSuccess?.(data, variables) }, }) } + From 0d2e225a66110e5b9f40e541fb98fede7c8602eb Mon Sep 17 00:00:00 2001 From: Avram Walden Date: Wed, 2 Oct 2024 17:47:48 -0700 Subject: [PATCH 2/3] feat: starts trying to use queryOptions --- app/frontend/queries/commands/index.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/app/frontend/queries/commands/index.ts b/app/frontend/queries/commands/index.ts index e59a281..e30d74c 100644 --- a/app/frontend/queries/commands/index.ts +++ b/app/frontend/queries/commands/index.ts @@ -1,16 +1,19 @@ -import { useQuery } from '@tanstack/react-query' +import { useQuery, queryOptions } from '@tanstack/react-query' import { Routes } from '@/lib' import axios from 'axios' import { ComboboxData } from '@mantine/core' import { type ReactQueryFunction } from '..' +import queryKeys from '../queryKeys' export const useGetCommand: ReactQueryFunction = ({ slug }, options) => { return useQuery({ - queryKey: [`command/${slug}`], - queryFn: async () => { - const res = await axios.get(Routes.apiCommand(slug)) - return res.data - }, + ...queryOptions({ + queryKey: queryKeys.commands.detail(slug), + queryFn: async () => { + const res = await axios.get(Routes.apiCommand(slug)) + return res.data + }, + }), ...options, }) } From 777e8c37ccbd8b8e7f27e14c8141a91c8816c1d3 Mon Sep 17 00:00:00 2001 From: Avram Walden Date: Thu, 3 Oct 2024 15:10:52 -0700 Subject: [PATCH 3/3] feat: standardizes react-query methodology --- app/frontend/queries/commands/index.ts | 43 +----------- app/frontend/queries/commands/keys.ts | 7 ++ app/frontend/queries/commands/mutations.ts | 22 ++++++ app/frontend/queries/commands/queries.ts | 38 +++++++++++ app/frontend/queries/controls/index.ts | 49 +------------- app/frontend/queries/controls/keys.ts | 6 ++ app/frontend/queries/controls/mutations.ts | 25 +++++++ app/frontend/queries/controls/queries.ts | 26 ++++++++ app/frontend/queries/index.ts | 38 ++++++----- app/frontend/queries/protocols/index.ts | 28 +------- app/frontend/queries/protocols/keys.ts | 7 ++ app/frontend/queries/protocols/mutations.ts | 25 +++++++ app/frontend/queries/protocols/queries.ts | 27 ++++++++ app/frontend/queries/queryKeys.ts | 23 ------- app/frontend/queries/servers/index.ts | 17 +---- app/frontend/queries/servers/keys.ts | 6 ++ app/frontend/queries/servers/mutations.ts | 25 +++++++ app/frontend/queries/servers/queries.ts | 16 +++++ app/frontend/queries/users/index.ts | 74 +-------------------- app/frontend/queries/users/keys.ts | 8 +++ app/frontend/queries/users/mutations.ts | 69 +++++++++++++++++++ app/frontend/queries/users/queries.ts | 16 +++++ 22 files changed, 355 insertions(+), 240 deletions(-) create mode 100644 app/frontend/queries/commands/keys.ts create mode 100644 app/frontend/queries/commands/mutations.ts create mode 100644 app/frontend/queries/commands/queries.ts create mode 100644 app/frontend/queries/controls/keys.ts create mode 100644 app/frontend/queries/controls/mutations.ts create mode 100644 app/frontend/queries/controls/queries.ts create mode 100644 app/frontend/queries/protocols/keys.ts create mode 100644 app/frontend/queries/protocols/mutations.ts create mode 100644 app/frontend/queries/protocols/queries.ts delete mode 100644 app/frontend/queries/queryKeys.ts create mode 100644 app/frontend/queries/servers/keys.ts create mode 100644 app/frontend/queries/servers/mutations.ts create mode 100644 app/frontend/queries/servers/queries.ts create mode 100644 app/frontend/queries/users/keys.ts create mode 100644 app/frontend/queries/users/mutations.ts create mode 100644 app/frontend/queries/users/queries.ts diff --git a/app/frontend/queries/commands/index.ts b/app/frontend/queries/commands/index.ts index e30d74c..938d84e 100644 --- a/app/frontend/queries/commands/index.ts +++ b/app/frontend/queries/commands/index.ts @@ -1,41 +1,2 @@ -import { useQuery, queryOptions } from '@tanstack/react-query' -import { Routes } from '@/lib' -import axios from 'axios' -import { ComboboxData } from '@mantine/core' -import { type ReactQueryFunction } from '..' -import queryKeys from '../queryKeys' - -export const useGetCommand: ReactQueryFunction = ({ slug }, options) => { - return useQuery({ - ...queryOptions({ - queryKey: queryKeys.commands.detail(slug), - queryFn: async () => { - const res = await axios.get(Routes.apiCommand(slug)) - return res.data - }, - }), - ...options, - }) -} - -export const useGetCommands: ReactQueryFunction = (options) => { - return useQuery({ - queryKey: ['commands'], - queryFn: async () => { - const res = await axios.get(Routes.apiCommands()) - return res.data - }, - ...options, - }) -} - -export const useGetCommandPayloadTypes: ReactQueryFunction = (options) => { - return useQuery({ - queryKey: ['commandPayloadTypes'], - queryFn: async () => { - const res = await axios.get(Routes.apiCommandsPayloadTypes()) - return res.data - }, - ...options, - }) -} +export * from './queries' +export * from './mutations' diff --git a/app/frontend/queries/commands/keys.ts b/app/frontend/queries/commands/keys.ts new file mode 100644 index 0000000..831c164 --- /dev/null +++ b/app/frontend/queries/commands/keys.ts @@ -0,0 +1,7 @@ +const queryRoot = 'commands' + +export const queryKeys = { + commands: [queryRoot] as const, + command: (slug: string) => [queryRoot, slug] as const, + payloadTypes: [queryRoot, 'payloadTypes'] as const, +} diff --git a/app/frontend/queries/commands/mutations.ts b/app/frontend/queries/commands/mutations.ts new file mode 100644 index 0000000..0e6bd1d --- /dev/null +++ b/app/frontend/queries/commands/mutations.ts @@ -0,0 +1,22 @@ +import { useMutation, useQueryClient } from "@tanstack/react-query" +import { type ReactMutationFunction } from ".." +import axios from 'axios'; +import { Routes } from "@/lib"; +import { queryKeys } from "./keys"; + +export const useCreateCommand: ReactMutationFunction = (options) => { + const queryClient = useQueryClient() + + return useMutation({ + mutationKey: queryKeys.commands, + mutationFn: async (data) => { + const res = await axios.post(Routes.apiCommands(), data) + return res.data + }, + ...options, + onSuccess: (data, variables) => { + queryClient.invalidateQueries({ queryKey: queryKeys.commands }) + options?.onSuccess?.(data, variables) + }, + }) +} diff --git a/app/frontend/queries/commands/queries.ts b/app/frontend/queries/commands/queries.ts new file mode 100644 index 0000000..7528042 --- /dev/null +++ b/app/frontend/queries/commands/queries.ts @@ -0,0 +1,38 @@ +import { useQuery } from '@tanstack/react-query' +import { Routes } from '@/lib' +import axios from 'axios' +import { ComboboxData } from '@mantine/core' +import { type ReactQueryFunction } from '..' +import { queryKeys } from "./keys"; +export const useGetCommands: ReactQueryFunction = (options) => { + return useQuery({ + queryKey: queryKeys.commands, + queryFn: async () => { + const res = await axios.get(Routes.apiCommands()) + return res.data + }, + ...options, + }) +} + +export const useGetCommand: ReactQueryFunction = ({ slug }, options) => { + return useQuery({ + queryKey: queryKeys.command(slug), + queryFn: async () => { + const res = await axios.get(Routes.apiCommand(slug)) + return res.data + }, + ...options, + }) +} + +export const useGetCommandPayloadTypes: ReactQueryFunction = (options) => { + return useQuery({ + queryKey: queryKeys.payloadTypes, + queryFn: async () => { + const res = await axios.get(Routes.apiCommandsPayloadTypes()) + return res.data + }, + ...options, + }) +} diff --git a/app/frontend/queries/controls/index.ts b/app/frontend/queries/controls/index.ts index d9088f7..938d84e 100644 --- a/app/frontend/queries/controls/index.ts +++ b/app/frontend/queries/controls/index.ts @@ -1,47 +1,2 @@ -import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query' -import { Routes } from '@/lib' -import axios from 'axios' -import { ComboboxData } from '@mantine/core' -import { type ReactQueryFunction, type ReactMutationFunction } from '..' - -export const useGetControl: ReactQueryFunction = ({ slug }, options) => { - return useQuery({ - queryKey: [`control/${slug}`], - queryFn: async () => { - const res = await axios.get(Routes.apiControl(slug)) - return res.data - }, - ...options, - }) -} - -export const useGetControls: ReactQueryFunction = (options) => { - return useQuery({ - queryKey: ['controls'], - queryFn: async () => { - const res = await axios.get(Routes.apiControls()) - return res.data - }, - ...options, - }) -} - -export const useCreateControl: ReactMutationFunction< - Schema.ControlsFormData & { type: string }, - Schema.ControlsShow -> = ({ options }) => { - const queryClient = useQueryClient() - - return useMutation({ - mutationFn: async ({ type }) => { - const res = await axios.post(Routes.apiControls(), type) - return res.data - }, - mutationKey: ['controls'], - ...options, - onSuccess: (data, variables) => { - queryClient.invalidateQueries({ queryKey: ['controls'] }) - options?.onSuccess?.(data, variables) - }, - }) -} +export * from './queries' +export * from './mutations' diff --git a/app/frontend/queries/controls/keys.ts b/app/frontend/queries/controls/keys.ts new file mode 100644 index 0000000..22620a2 --- /dev/null +++ b/app/frontend/queries/controls/keys.ts @@ -0,0 +1,6 @@ +const queryRoot = 'control' + +export const queryKeys = { + controls: [queryRoot] as const, + control: (slug: string) => [queryRoot, slug] as const, +} diff --git a/app/frontend/queries/controls/mutations.ts b/app/frontend/queries/controls/mutations.ts new file mode 100644 index 0000000..0c17654 --- /dev/null +++ b/app/frontend/queries/controls/mutations.ts @@ -0,0 +1,25 @@ +import { useMutation, useQueryClient } from "@tanstack/react-query" +import { type ReactMutationFunction } from ".." +import axios from 'axios'; +import { Routes } from "@/lib"; +import { queryKeys } from "./keys"; + +export const useCreateControl: ReactMutationFunction< + Schema.ControlsFormData, + Schema.ControlsShow +> = (options) => { + const queryClient = useQueryClient() + + return useMutation({ + mutationKey: queryKeys.controls, + mutationFn: async (data) => { + const res = await axios.post(Routes.apiControls(), data) + return res.data + }, + ...options, + onSuccess: (data, variables) => { + queryClient.invalidateQueries({ queryKey: queryKeys.controls }) + options?.onSuccess?.(data, variables) + }, + }) +} diff --git a/app/frontend/queries/controls/queries.ts b/app/frontend/queries/controls/queries.ts new file mode 100644 index 0000000..82be53c --- /dev/null +++ b/app/frontend/queries/controls/queries.ts @@ -0,0 +1,26 @@ +import { useQuery } from '@tanstack/react-query' +import { Routes } from '@/lib' +import axios from 'axios' +import { type ReactQueryFunction } from '..' + +export const useGetControl: ReactQueryFunction = ({ slug }, options) => { + return useQuery({ + queryKey: [`control/${slug}`], + queryFn: async () => { + const res = await axios.get(Routes.apiControl(slug)) + return res.data + }, + ...options, + }) +} + +export const useGetControls: ReactQueryFunction = (options) => { + return useQuery({ + queryKey: ['controls'], + queryFn: async () => { + const res = await axios.get(Routes.apiControls()) + return res.data + }, + ...options, + }) +} diff --git a/app/frontend/queries/index.ts b/app/frontend/queries/index.ts index 1d77d15..829fed8 100644 --- a/app/frontend/queries/index.ts +++ b/app/frontend/queries/index.ts @@ -9,15 +9,19 @@ import { * Query types */ -interface LimitedQueryOptions extends Omit, 'queryKey'|'queryFn'> {} +interface LimitedQueryOptions extends Omit, 'queryKey' | 'queryFn'> {} type ReactQueryFunctionBasic = (options?: LimitedQueryOptions) => UseQueryResult -type ReactQueryFunctionWithParams> = (params: TParams, options?: LimitedQueryOptions) => UseQueryResult + +type ReactQueryFunctionWithParams> = ( + params: TParams, + options?: LimitedQueryOptions +) => UseQueryResult export type ReactQueryFunction = TParams extends undefined ? ReactQueryFunctionBasic - : TParams extends Record + : TParams extends Record ? ReactQueryFunctionWithParams : never; @@ -25,28 +29,30 @@ export type ReactQueryFunction = * Mutation types */ -interface LimitedMutationOptions extends Omit, 'mutationKey'|'onSuccess'> { +interface LimitedMutationOptions extends + Omit, 'mutationKey' | 'onSuccess'> { onSuccess?: (data: TReturnData, variables: TVariables) => void } +type ReactMutationFunctionBasic = ( + options?: LimitedMutationOptions +) => UseMutationResult + +type ReactMutationFunctionWithParams, TError = unknown> = ( + params: TParams, + options?: LimitedMutationOptions +) => UseMutationResult + export type ReactMutationFunction< TMutationVariables, TReturnData, TParams = undefined, TError = unknown > = TParams extends undefined - ? ({ - options - }: { - options: LimitedMutationOptions - }) => UseMutationResult - : ({ - params, - options, - }: { - params: TParams, - options?: LimitedMutationOptions - }) => UseMutationResult + ? ReactMutationFunctionBasic + : TParams extends Record + ? ReactMutationFunctionWithParams + : never /** * Folder exports diff --git a/app/frontend/queries/protocols/index.ts b/app/frontend/queries/protocols/index.ts index 495423b..938d84e 100644 --- a/app/frontend/queries/protocols/index.ts +++ b/app/frontend/queries/protocols/index.ts @@ -1,26 +1,2 @@ -import { useQuery } from '@tanstack/react-query' -import { Routes } from '@/lib' -import axios from 'axios' -import { type ReactQueryFunction } from '..' - -export const useGetProtocol: ReactQueryFunction = ({ slug }, options) => { - return useQuery({ - queryKey: [`protocol/${slug}`], - queryFn: async () => { - const res = await axios.get(Routes.apiProtocol(slug)) - return res.data - }, - ...options, - }) -} - -export const useGetProtocolOptions: ReactQueryFunction = (options) => { - return useQuery({ - queryKey: ['protocolOptions'], - queryFn: async () => { - const res = await axios.get(Routes.apiProtocolsOptions()) - return res.data - }, - ...options, - }) -} +export * from './queries' +export * from './mutations' diff --git a/app/frontend/queries/protocols/keys.ts b/app/frontend/queries/protocols/keys.ts new file mode 100644 index 0000000..7d280c8 --- /dev/null +++ b/app/frontend/queries/protocols/keys.ts @@ -0,0 +1,7 @@ +const queryRoot = 'protocols' + +export const queryKeys = { + protocols: [queryRoot] as const, + protocol: (slug: string) => [queryRoot, slug] as const, + protocolOptions: [queryRoot, 'options'] as const, +} diff --git a/app/frontend/queries/protocols/mutations.ts b/app/frontend/queries/protocols/mutations.ts new file mode 100644 index 0000000..2babab1 --- /dev/null +++ b/app/frontend/queries/protocols/mutations.ts @@ -0,0 +1,25 @@ +import { useMutation, useQueryClient } from "@tanstack/react-query" +import { type ReactMutationFunction } from ".." +import axios from 'axios'; +import { Routes } from "@/lib"; +import { queryKeys } from "./keys"; + +export const useCreateProtocol: ReactMutationFunction< + Schema.ProtocolsFormData, + Schema.ProtocolsShow +> = (options) => { + const queryClient = useQueryClient() + + return useMutation({ + mutationKey: queryKeys.protocols, + mutationFn: async (data) => { + const res = await axios.post(Routes.apiProtocols(), data) + return res.data + }, + ...options, + onSuccess: (data, variables) => { + queryClient.invalidateQueries({ queryKey: queryKeys.protocols }) + options?.onSuccess?.(data, variables) + }, + }) +} diff --git a/app/frontend/queries/protocols/queries.ts b/app/frontend/queries/protocols/queries.ts new file mode 100644 index 0000000..d8acfd5 --- /dev/null +++ b/app/frontend/queries/protocols/queries.ts @@ -0,0 +1,27 @@ +import { useQuery } from '@tanstack/react-query' +import { Routes } from '@/lib' +import axios from 'axios' +import { type ReactQueryFunction } from '..' +import { queryKeys } from './keys' + +export const useGetProtocol: ReactQueryFunction = ({ slug }, options) => { + return useQuery({ + queryKey: queryKeys.protocol(slug), + queryFn: async () => { + const res = await axios.get(Routes.apiProtocol(slug)) + return res.data + }, + ...options, + }) +} + +export const useGetProtocolOptions: ReactQueryFunction = (options) => { + return useQuery({ + queryKey: queryKeys.protocolOptions, + queryFn: async () => { + const res = await axios.get(Routes.apiProtocolsOptions()) + return res.data + }, + ...options, + }) +} diff --git a/app/frontend/queries/queryKeys.ts b/app/frontend/queries/queryKeys.ts deleted file mode 100644 index ccf0c61..0000000 --- a/app/frontend/queries/queryKeys.ts +++ /dev/null @@ -1,23 +0,0 @@ -const queryKeys = { - commands: { - root: ['commands'] as const, - detail: (slug: string) => [...queryKeys.commands.root, slug] as const, - payloadTypes: ['commands', 'payloadTypes'] as const, - }, - controls: { - root: ['controls'] as const, - detail: (slug: string) => [...queryKeys.controls.root, slug] as const, - }, - protocols: { - root: ['protocols'] as const, - detail: (slug: string) => [...queryKeys.protocols.root, slug] as const, - options: ['protocols', 'options'] as const, - }, - servers: { - root: ['servers'] as const, - detail: (slug: string) => [...queryKeys.servers.root, slug] as const, - options: ['servers', 'options'] as const, - }, -} - -export default queryKeys diff --git a/app/frontend/queries/servers/index.ts b/app/frontend/queries/servers/index.ts index 53d802e..938d84e 100644 --- a/app/frontend/queries/servers/index.ts +++ b/app/frontend/queries/servers/index.ts @@ -1,15 +1,2 @@ -import { useQuery } from '@tanstack/react-query' -import { Routes } from '@/lib' -import axios from 'axios' -import { type ReactQueryFunction } from '..' - -export const useGetServers: ReactQueryFunction = (options) => { - return useQuery({ - queryKey: ['servers'], - queryFn: async (): Promise => { - const res = await axios.get(Routes.apiServers()) - return res.data - }, - ...options, - }) -} +export * from './queries' +export * from './mutations' diff --git a/app/frontend/queries/servers/keys.ts b/app/frontend/queries/servers/keys.ts new file mode 100644 index 0000000..0b66fed --- /dev/null +++ b/app/frontend/queries/servers/keys.ts @@ -0,0 +1,6 @@ +const queryRoot = 'servers' + +export const queryKeys = { + servers: [queryRoot] as const, + server: (slug: string) => [queryRoot, slug] as const, +} diff --git a/app/frontend/queries/servers/mutations.ts b/app/frontend/queries/servers/mutations.ts new file mode 100644 index 0000000..3fe2401 --- /dev/null +++ b/app/frontend/queries/servers/mutations.ts @@ -0,0 +1,25 @@ +import { useMutation, useQueryClient } from "@tanstack/react-query" +import { type ReactMutationFunction } from ".." +import axios from 'axios'; +import { Routes } from "@/lib"; +import { queryKeys } from "./keys"; + +export const useCreateServer: ReactMutationFunction< + Schema.ServersFormData, + Schema.ServersShow +> = (options) => { + const queryClient = useQueryClient() + + return useMutation({ + mutationKey: queryKeys.servers, + mutationFn: async (data) => { + const res = await axios.post(Routes.apiServers(), data) + return res.data + }, + ...options, + onSuccess: (data, variables) => { + queryClient.invalidateQueries({ queryKey: queryKeys.servers }) + options?.onSuccess?.(data, variables) + }, + }) +} diff --git a/app/frontend/queries/servers/queries.ts b/app/frontend/queries/servers/queries.ts new file mode 100644 index 0000000..6fefdbc --- /dev/null +++ b/app/frontend/queries/servers/queries.ts @@ -0,0 +1,16 @@ +import { useQuery } from '@tanstack/react-query' +import { Routes } from '@/lib' +import axios from 'axios' +import { type ReactQueryFunction } from '..' +import { queryKeys } from './keys' + +export const useGetServers: ReactQueryFunction = (options) => { + return useQuery({ + queryKey: queryKeys.servers, + queryFn: async (): Promise => { + const res = await axios.get(Routes.apiServers()) + return res.data + }, + ...options, + }) +} diff --git a/app/frontend/queries/users/index.ts b/app/frontend/queries/users/index.ts index 3650d55..938d84e 100644 --- a/app/frontend/queries/users/index.ts +++ b/app/frontend/queries/users/index.ts @@ -1,72 +1,2 @@ -import { Routes } from '@/lib' -import axios from 'axios' -import { type UserPreferences, type UserTablePreferences } from '@/types' -import { useMutation, useQueryClient } from '@tanstack/react-query' -import { type ReactMutationFunction } from '..' - -// type UserPreferencesParams = { -// id: string | number -// preferences: UserPreferences -// } - -// export const useUpdateUserPreferences: ReactMutationFunction = ( -// params, -// options, -// ) => { -// const queryClient = useQueryClient() - -// return useMutation({ -// mutationFn: async ({ id, preferences }) => { -// const res = await axios.patch(Routes.apiUpdateUserPreferences(id), { -// user: { user_preferences: preferences }, -// }) -// if(res.statusText !== 'OK') { -// throw new Error('Failed to update user preferences') -// } -// return res.data -// }, -// mutationKey: ['user', params.id, 'preferences'], -// ...options, -// onSuccess: (data, variables) => { -// queryClient.invalidateQueries({ queryKey: ['user', params.id, 'preferences'] }) -// options?.onSuccess?.(data, variables) -// }, -// }) -// } - -type UserTablePreferencesParams = { - id: string | number - preferences: UserTablePreferences -} - -export const useUpdateUserTablePreferences: ReactMutationFunction< - UserTablePreferencesParams, - Schema.User, - { id: string|number } -> = ({ - params, - options, -}) => { - const queryClient = useQueryClient() - - const queryKey = ['user', params.id, 'table_preferences'] - - return useMutation({ - mutationFn: async ({ id, preferences }) => { - const res = await axios.patch(Routes.apiUpdateTablePreferences(id), { - user: { table_preferences: preferences }, - }) - if(res.statusText !== 'OK') { - throw new Error('Failed to update user preferences') - } - return res.data - }, - mutationKey: queryKey, - ...options, - onSuccess: (data, variables) => { - queryClient.invalidateQueries({ queryKey }) - options?.onSuccess?.(data, variables) - }, - }) -} - +export * from './queries' +export * from './mutations' diff --git a/app/frontend/queries/users/keys.ts b/app/frontend/queries/users/keys.ts new file mode 100644 index 0000000..5f1b792 --- /dev/null +++ b/app/frontend/queries/users/keys.ts @@ -0,0 +1,8 @@ +const queryRoot = 'users' + +export const queryKeys = { + users: [queryRoot] as const, + user: (id: string | number) => [queryRoot, id] as const, + userPreferences: (id: string | number) => [queryRoot, id, 'preferences'] as const, + userTablePreferences: (id: string | number) => [queryRoot, id, 'table_preferences'] as const, +} diff --git a/app/frontend/queries/users/mutations.ts b/app/frontend/queries/users/mutations.ts new file mode 100644 index 0000000..7a11367 --- /dev/null +++ b/app/frontend/queries/users/mutations.ts @@ -0,0 +1,69 @@ +import { Routes } from '@/lib' +import axios from 'axios' +import { type UserPreferences, type UserTablePreferences } from '@/types' +import { useMutation, useQueryClient } from '@tanstack/react-query' +import { type ReactMutationFunction } from '..' +import { queryKeys } from './keys' + +type UserPreferencesParams = { + id: string | number + preferences: UserPreferences +} + +export const useUpdateUserPreferences: ReactMutationFunction< + UserPreferencesParams, + Schema.User, + { id: string | number } +> = (params, options) => { + const queryClient = useQueryClient() + + return useMutation({ + mutationKey: queryKeys.userPreferences(params.id), + mutationFn: async ({ id, preferences }) => { + const res = await axios.patch(Routes.apiUpdateUserPreferences(id), { + user: { user_preferences: preferences }, + }) + if(res.statusText !== 'OK') { + throw new Error('Failed to update user preferences') + } + return res.data + }, + ...options, + onSuccess: (data, variables) => { + queryClient.invalidateQueries({ queryKey: queryKeys.userPreferences(variables.id) }) + options?.onSuccess?.(data, variables) + }, + }) +} + +type UserTablePreferencesParams = { + id: string | number + preferences: UserTablePreferences +} + +export const useUpdateUserTablePreferences: ReactMutationFunction< + UserTablePreferencesParams, + Schema.User, + { id: string | number } +> = (params, options) => { + const queryClient = useQueryClient() + + return useMutation({ + mutationKey: queryKeys.userTablePreferences(params.id), + mutationFn: async ({ id, preferences }) => { + const res = await axios.patch(Routes.apiUpdateTablePreferences(id), { + user: { table_preferences: preferences }, + }) + if(res.statusText !== 'OK') { + throw new Error('Failed to update table preferences') + } + return res.data + }, + ...options, + onSuccess: (data, variables) => { + queryClient.invalidateQueries({ queryKey: queryKeys.userTablePreferences(variables.id) }) + options?.onSuccess?.(data, variables) + }, + }) +} + diff --git a/app/frontend/queries/users/queries.ts b/app/frontend/queries/users/queries.ts new file mode 100644 index 0000000..57397d6 --- /dev/null +++ b/app/frontend/queries/users/queries.ts @@ -0,0 +1,16 @@ +import { useQuery } from '@tanstack/react-query' +import { Routes } from '@/lib' +import axios from 'axios' +import { type ReactQueryFunction } from '..' +import { queryKeys } from './keys' + +export const useGetUsers: ReactQueryFunction = (options) => { + return useQuery({ + queryKey: queryKeys.users, + queryFn: async () => { + const res = await axios.get(Routes.apiUsers()) + return res.data + }, + ...options, + }) +}