From 98892fdc5aa189d83c604f124b92abc399c20f3f Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Thu, 13 Feb 2025 10:47:02 -0700 Subject: [PATCH] update --- web/.cursor/rules/api_buster_rest_rules.mdc | 1 - .../api/buster_socket/chats/chatResponses.ts | 12 +++- web/src/context/AppProviders.tsx | 2 +- .../BusterReactQueryAndApi.tsx | 0 .../getQueryClient.ts | 0 web/src/hooks/useSocketQuery/helpers.ts | 11 ++-- .../hooks/useSocketQuery/useSocketQueryOn.tsx | 12 ++-- .../hooks/useSocketQueryNew/queryKeyConfig.ts | 56 ++++++++++++++++ web/src/hooks/useSocketQueryNew/types.ts | 16 +++++ .../useSocketQueryNew/useSocketQueryOn.tsx | 65 +++++++++++++++++++ 10 files changed, 161 insertions(+), 14 deletions(-) rename web/src/context/{BusterApi => BusterReactQuery}/BusterReactQueryAndApi.tsx (100%) rename web/src/context/{BusterApi => BusterReactQuery}/getQueryClient.ts (100%) create mode 100644 web/src/hooks/useSocketQueryNew/queryKeyConfig.ts create mode 100644 web/src/hooks/useSocketQueryNew/types.ts create mode 100644 web/src/hooks/useSocketQueryNew/useSocketQueryOn.tsx diff --git a/web/.cursor/rules/api_buster_rest_rules.mdc b/web/.cursor/rules/api_buster_rest_rules.mdc index d0fa76021..2c64acf84 100644 --- a/web/.cursor/rules/api_buster_rest_rules.mdc +++ b/web/.cursor/rules/api_buster_rest_rules.mdc @@ -2,7 +2,6 @@ description: Rules for the buster_rest API directory globs: src/api/buster_rest/**/* --- - # Buster REST API Rules - Follow RESTful design principles diff --git a/web/src/api/buster_socket/chats/chatResponses.ts b/web/src/api/buster_socket/chats/chatResponses.ts index ea460af71..9fe26d9b0 100644 --- a/web/src/api/buster_socket/chats/chatResponses.ts +++ b/web/src/api/buster_socket/chats/chatResponses.ts @@ -14,7 +14,8 @@ export enum ChatsResponses { '/chats/post:generatingTitle' = '/chats/post:generatingTitle', '/chats/post:generatingResponseMessage' = '/chats/post:generatingResponseMessage', '/chats/post:generatingReasoningMessage' = '/chats/post:generatingReasoningMessage', - '/chats/post:complete' = '/chats/post:complete' + '/chats/post:complete' = '/chats/post:complete', + '/chats/delete:deleteChat' = '/chats/delete:deleteChat' } export type ChatList_getChatsList = { @@ -42,6 +43,12 @@ export type Chat_unsubscribe = { onError?: (d: unknown | RustApiError) => void; }; +export type Chat_deleteChat = { + route: '/chats/delete:deleteChat'; + callback: (d: { id: string }[]) => void; + onError?: (d: unknown | RustApiError) => void; +}; + /***** CHAT PROGRESS EVENTS START ******/ export type ChatPost_initializeChat = { @@ -84,4 +91,5 @@ export type ChatResponseTypes = | ChatPost_generatingTitle | ChatPost_generatingResponseMessage | ChatPost_generatingReasoningMessage - | ChatPost_complete; + | ChatPost_complete + | Chat_deleteChat; diff --git a/web/src/context/AppProviders.tsx b/web/src/context/AppProviders.tsx index 9ba0662c1..04652bbc7 100644 --- a/web/src/context/AppProviders.tsx +++ b/web/src/context/AppProviders.tsx @@ -5,7 +5,7 @@ import React, { PropsWithChildren } from 'react'; import { BusterWebSocketProvider } from './BusterWebSocket'; import { SupabaseContextProvider } from './Supabase/SupabaseContextProvider'; import { UseSupabaseContextType } from './Supabase/useSupabaseContext'; -import { BusterReactQueryProvider } from './BusterApi/BusterReactQueryAndApi'; +import { BusterReactQueryProvider } from './BusterReactQuery/BusterReactQueryAndApi'; import { useMount } from 'ahooks'; import { DatasetProviders } from './Datasets'; import { AppHotKeysProvider } from './AppHotKeys'; diff --git a/web/src/context/BusterApi/BusterReactQueryAndApi.tsx b/web/src/context/BusterReactQuery/BusterReactQueryAndApi.tsx similarity index 100% rename from web/src/context/BusterApi/BusterReactQueryAndApi.tsx rename to web/src/context/BusterReactQuery/BusterReactQueryAndApi.tsx diff --git a/web/src/context/BusterApi/getQueryClient.ts b/web/src/context/BusterReactQuery/getQueryClient.ts similarity index 100% rename from web/src/context/BusterApi/getQueryClient.ts rename to web/src/context/BusterReactQuery/getQueryClient.ts diff --git a/web/src/hooks/useSocketQuery/helpers.ts b/web/src/hooks/useSocketQuery/helpers.ts index f5d648978..890ddea59 100644 --- a/web/src/hooks/useSocketQuery/helpers.ts +++ b/web/src/hooks/useSocketQuery/helpers.ts @@ -1,11 +1,12 @@ import { BusterSocketRequest, BusterSocketResponseRoute } from '@/api/buster_socket'; -import { BusterSocketResponseConfig } from './types'; +import { BusterSocketResponseConfig, InferBusterSocketResponseData } from './types'; import { QueryKey } from '@tanstack/react-query'; export const createQueryKey: ( - socketResponse: BusterSocketResponseConfig, + socketResponse: BusterSocketResponseConfig['route'], + callbackResult: InferBusterSocketResponseData, socketRequest?: BusterSocketRequest -) => QueryKey = (socketResponse, socketRequest) => { - if (socketRequest) return [socketResponse.route, socketRequest.route, socketRequest.payload]; - return [socketResponse.route]; +) => QueryKey = (socketResponse, callbackResult, socketRequest) => { + if (socketRequest) return [socketResponse, socketRequest.route, socketRequest.payload]; + return [socketResponse]; }; diff --git a/web/src/hooks/useSocketQuery/useSocketQueryOn.tsx b/web/src/hooks/useSocketQuery/useSocketQueryOn.tsx index ec33d8d79..9062cec92 100644 --- a/web/src/hooks/useSocketQuery/useSocketQueryOn.tsx +++ b/web/src/hooks/useSocketQuery/useSocketQueryOn.tsx @@ -18,15 +18,17 @@ import { useMemo } from 'react'; export const useSockeQueryOn = ( socketResponse: BusterSocketResponseConfig, - options?: Partial, TError>> + options?: { + queryKey?: QueryKey; + } ): UseBusterSocketQueryResult, TError> => { const busterSocket = useBusterWebSocket(); const queryClient = useQueryClient(); - const queryKey = useMemo( - () => options?.queryKey || createQueryKey(socketResponse), - [options?.queryKey, socketResponse?.route] - ); + // const queryKey = useMemo( + // () => options?.queryKey || createQueryKey(socketResponse), + // [options?.queryKey, socketResponse?.route] + // ); useMount(() => { busterSocket.on({ diff --git a/web/src/hooks/useSocketQueryNew/queryKeyConfig.ts b/web/src/hooks/useSocketQueryNew/queryKeyConfig.ts new file mode 100644 index 000000000..707b3276b --- /dev/null +++ b/web/src/hooks/useSocketQueryNew/queryKeyConfig.ts @@ -0,0 +1,56 @@ +import { useQuery, useQueryClient } from '@tanstack/react-query'; +import { BusterChat, BusterChatListItem } from '@/api/asset_interfaces/chat'; +import { queryOptions } from '@tanstack/react-query'; +import { ChatListEmitPayload } from '@/api/buster_socket/chats'; + +const chatsGetChat = (chatId: string) => + queryOptions({ + queryKey: ['chats', 'get', chatId] as const, + queryFn: () => { + return Promise.resolve({ id: chatId } as BusterChat); + }, + staleTime: 10 * 1000 + }); + +const chatsGetList = (filters?: ChatListEmitPayload) => + queryOptions({ + queryKey: ['chats', 'list', filters] as const, + queryFn: () => { + return Promise.resolve([] as BusterChatListItem[]); + } + }); + +const deleteChat = (chatId: string) => + queryOptions({ + queryKey: ['chats', 'get', chatId] as const, + queryFn: () => { + return [chatId]; + } + }); + +export const queryOptionsConfig = { + '/chats/get:getChat': chatsGetChat, + '/chats/list:getChatsList': chatsGetList, + '/chats/delete:deleteChat': deleteChat +}; + +const ExampleComponent = () => { + const queryClient = useQueryClient(); + const options = queryOptionsConfig['/chats/get:getChat']!('123'); + const queryKey = options.queryKey; + + const data = queryClient.getQueryData(queryKey); + + const { data: data2 } = useQuery(options); + + queryClient.setQueryData(queryKey, (d) => { + return d; + }); + + const options2 = queryOptionsConfig['/chats/delete:deleteChat']!('123'); + const queryKey2 = options2.queryKey; + + const data3 = queryClient.getQueryData(queryKey2); + + // +}; diff --git a/web/src/hooks/useSocketQueryNew/types.ts b/web/src/hooks/useSocketQueryNew/types.ts new file mode 100644 index 000000000..06332aa82 --- /dev/null +++ b/web/src/hooks/useSocketQueryNew/types.ts @@ -0,0 +1,16 @@ +import type { BusterSocketResponse, BusterSocketResponseRoute } from '@/api/buster_socket'; + +export type BusterSocketResponseConfig = { + route: TRoute; + onError?: (d: unknown) => void; +}; + +export type BusterSocketResponseConfigRoute = + BusterSocketResponseConfig['route']; + +export type InferBusterSocketResponseData = Extract< + BusterSocketResponse, + { route: TRoute } +>['callback'] extends (d: infer D) => void + ? D + : never; diff --git a/web/src/hooks/useSocketQueryNew/useSocketQueryOn.tsx b/web/src/hooks/useSocketQueryNew/useSocketQueryOn.tsx new file mode 100644 index 000000000..a802c4b87 --- /dev/null +++ b/web/src/hooks/useSocketQueryNew/useSocketQueryOn.tsx @@ -0,0 +1,65 @@ +'use client'; + +import { + QueryKey, + useQuery, + useQueryClient, + UseQueryOptions, + UseQueryResult +} from '@tanstack/react-query'; +import type { + BusterSocketRequest, + BusterSocketResponse, + BusterSocketResponseRoute +} from '@/api/buster_socket'; +import { useBusterWebSocket } from '@/context/BusterWebSocket'; +import { useEffect } from 'react'; +import { + BusterSocketResponseConfig, + BusterSocketResponseConfigRoute, + InferBusterSocketResponseData +} from './types'; +import { useMount } from 'ahooks'; +import { queryOptionsConfig } from './queryKeyConfig'; + +export const useSocketQueryOn = < + TRoute extends BusterSocketResponseRoute, + TError = unknown, + TData = InferBusterSocketResponseData, + TQueryKey extends QueryKey = QueryKey +>( + socketResponse: TRoute, + options: UseQueryOptions, TError, TData, TQueryKey>, + callback?: (d: InferBusterSocketResponseData) => TData +): UseQueryResult => { + const busterSocket = useBusterWebSocket(); + const queryClient = useQueryClient(); + const queryKey = options.queryKey; + + useMount(() => { + busterSocket.on({ + route: socketResponse, + callback: (d: unknown) => { + const transformer = callback || ((d: InferBusterSocketResponseData) => d as TData); + const transformedData: TData = transformer(d as InferBusterSocketResponseData); + queryClient.setQueryData(queryKey, transformedData); + } + } as BusterSocketResponse); + }); + + return useQuery({ + ...options, + enabled: false + }); +}; + +const ExampleComponent = () => { + const options = queryOptionsConfig['/chats/get:getChat']('123'); + const { data } = useSocketQueryOn('/chats/get:getChat', options); + + const options2 = queryOptionsConfig['/chats/list:getChatsList'](); + const { data: data2 } = useSocketQueryOn('/chats/list:getChatsList', options2); + + const options3 = queryOptionsConfig['/chats/delete:deleteChat']('123'); + const { data: data3 } = useSocketQueryOn('/chats/delete:deleteChat', options3); +};