@lobehub/chat 1.6.3 → 1.6.4

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.6.4](https://github.com/lobehub/lobe-chat/compare/v1.6.3...v1.6.4)
+
+<sup>Released on **2024-07-21**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Add trpc query client with react-query.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Add trpc query client with react-query, closes [#3282](https://github.com/lobehub/lobe-chat/issues/3282) ([013ee54](https://github.com/lobehub/lobe-chat/commit/013ee54))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.6.3](https://github.com/lobehub/lobe-chat/compare/v1.6.2...v1.6.3)
 
 <sup>Released on **2024-07-21**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -121,8 +121,10 @@
     "@next/third-parties": "^14.2.4",
     "@sentry/nextjs": "^7.118.0",
     "@t3-oss/env-nextjs": "^0.10.1",
+    "@tanstack/react-query": "^5.51.11",
     "@trpc/client": "next",
     "@trpc/next": "next",
+    "@trpc/react-query": "next",
     "@trpc/server": "next",
     "@vercel/analytics": "^1.3.1",
     "@vercel/speed-insights": "^1.0.12",

package/src/layout/GlobalProvider/Query.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React, { PropsWithChildren, useState } from 'react';
+
+import { lambdaQuery, lambdaQueryClient } from '@/libs/trpc/client';
+
+const QueryProvider = ({ children }: PropsWithChildren) => {
+  const [queryClient] = useState(() => new QueryClient());
+
+  return (
+    <lambdaQuery.Provider client={lambdaQueryClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </lambdaQuery.Provider>
+  );
+};
+
+export default QueryProvider;

package/src/layout/GlobalProvider/index.tsx

@@ -19,6 +19,7 @@ import { isMobileDevice } from '@/utils/responsive';
 
 import AppTheme from './AppTheme';
 import Locale from './Locale';
+import QueryProvider from './Query';
 import StoreInitialization from './StoreInitialization';
 import StyleRegistry from './StyleRegistry';
 
@@ -87,7 +88,7 @@ const GlobalLayout = async ({ children }: PropsWithChildren) => {
             isMobile={isMobile}
             serverConfig={serverConfig}
           >
-            {children}
+            <QueryProvider>{children}</QueryProvider>
             <StoreInitialization />
           </ServerConfigStoreProvider>
           <DebugUI />

package/src/libs/trpc/client/edge.ts

@@ -0,0 +1,20 @@
+import { createTRPCClient, httpBatchLink } from '@trpc/client';
+import superjson from 'superjson';
+
+import type { EdgeRouter } from '@/server/routers/edge';
+import { withBasePath } from '@/utils/basePath';
+
+export const edgeClient = createTRPCClient<EdgeRouter>({
+  links: [
+    httpBatchLink({
+      headers: async () => {
+        // dynamic import to avoid circular dependency
+        const { createHeaderWithAuth } = await import('@/services/_auth');
+
+        return createHeaderWithAuth();
+      },
+      transformer: superjson,
+      url: withBasePath('/trpc/edge'),
+    }),
+  ],
+});

package/src/libs/trpc/client/index.ts

@@ -0,0 +1,2 @@
+export { edgeClient } from './edge';
+export * from './lambda';

package/src/libs/trpc/client/lambda.ts

@@ -0,0 +1,38 @@
+import { createTRPCClient, httpBatchLink } from '@trpc/client';
+import { createTRPCReact } from '@trpc/react-query';
+import superjson from 'superjson';
+
+import { fetchErrorNotification } from '@/components/FetchErrorNotification';
+import type { LambdaRouter } from '@/server/routers/lambda';
+
+import { ErrorResponse } from './types';
+
+const links = [
+  httpBatchLink({
+    fetch: async (input, init) => {
+      const response = await fetch(input, init);
+      if (response.ok) return response;
+
+      const errorRes: ErrorResponse = await response.clone().json();
+
+      errorRes.forEach((item) => {
+        const errorData = item.error.json;
+
+        const status = errorData.data.httpStatus;
+        fetchErrorNotification.error({ errorMessage: errorData.message, status });
+      });
+
+      return response;
+    },
+    transformer: superjson,
+    url: '/trpc/lambda',
+  }),
+];
+
+export const lambdaClient = createTRPCClient<LambdaRouter>({
+  links,
+});
+
+export const lambdaQuery = createTRPCReact<LambdaRouter>();
+
+export const lambdaQueryClient = lambdaQuery.createClient({ links });

package/src/libs/trpc/client/types.ts

@@ -0,0 +1,18 @@
+export type ErrorResponse = ErrorItem[];
+
+export interface ErrorItem {
+  error: {
+    json: {
+      code: number;
+      data: Data;
+      message: string;
+    };
+  };
+}
+
+export interface Data {
+  code: string;
+  httpStatus: number;
+  path: string;
+  stack: string;
+}

package/src/libs/trpc/client.ts

@@ -1,65 +0,0 @@
-import { createTRPCClient, httpBatchLink } from '@trpc/client';
-import superjson from 'superjson';
-
-import { fetchErrorNotification } from '@/components/FetchErrorNotification';
-import type { EdgeRouter } from '@/server/routers/edge';
-import type { LambdaRouter } from '@/server/routers/lambda';
-import { withBasePath } from '@/utils/basePath';
-
-export const edgeClient = createTRPCClient<EdgeRouter>({
-  links: [
-    httpBatchLink({
-      headers: async () => {
-        // dynamic import to avoid circular dependency
-        const { createHeaderWithAuth } = await import('@/services/_auth');
-
-        return createHeaderWithAuth();
-      },
-      transformer: superjson,
-      url: withBasePath('/trpc/edge'),
-    }),
-  ],
-});
-
-export type ErrorResponse = ErrorItem[];
-
-export interface ErrorItem {
-  error: {
-    json: {
-      code: number;
-      data: Data;
-      message: string;
-    };
-  };
-}
-
-export interface Data {
-  code: string;
-  httpStatus: number;
-  path: string;
-  stack: string;
-}
-
-export const lambdaClient = createTRPCClient<LambdaRouter>({
-  links: [
-    httpBatchLink({
-      fetch: async (input, init) => {
-        const response = await fetch(input, init);
-        if (response.ok) return response;
-
-        const errorRes: ErrorResponse = await response.clone().json();
-
-        errorRes.forEach((item) => {
-          const errorData = item.error.json;
-
-          const status = errorData.data.httpStatus;
-          fetchErrorNotification.error({ errorMessage: errorData.message, status });
-        });
-
-        return response;
-      },
-      transformer: superjson,
-      url: '/trpc/lambda',
-    }),
-  ],
-});