add react query devtools in next template

This commit is contained in:
Aman Varshney
2025-05-20 17:51:37 +05:30
parent 45b2f62e08
commit 1521aa1ea6
10 changed files with 40 additions and 32 deletions

View File

@@ -0,0 +1,5 @@
---
"create-better-t-stack": patch
---
add react query devtools in next template

View File

@@ -15,8 +15,8 @@ const geistMono = Geist_Mono({
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: "{{projectName}}",
description: "{{projectName}}",
};
export default function RootLayout({

View File

@@ -1,9 +1,11 @@
"use client"
"use client";
{{#if (eq backend "convex")}}
import { ConvexProvider, ConvexReactClient } from "convex/react";
{{else}}
{{#unless (eq api "none")}}
import { QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
{{#if (eq api "orpc")}}
import { orpc, ORPCContext, queryClient } from "@/utils/orpc";
{{/if}}
@@ -12,6 +14,7 @@
{{/if}}
{{/unless}}
{{/if}}
import { ThemeProvider } from "./theme-provider";
import { Toaster } from "./ui/sonner";
@@ -19,32 +22,33 @@ import { Toaster } from "./ui/sonner";
const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
{{/if}}
export default function Providers({ children, }: { children: React.ReactNode })
{ return (
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{{#if (eq backend "convex")}}
<ConvexProvider client={convex}>{children}</ConvexProvider>
{{else}}
{{#unless (eq api "none")}}
<QueryClientProvider client={queryClient}>
{{#if (eq api "orpc")}}
<ORPCContext.Provider value={orpc}>
{children}
</ORPCContext.Provider>
{{/if}}
{{#if (eq api "trpc")}}
export default function Providers({ children }: { children: React.ReactNode }) { return (
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{{#if (eq backend "convex")}}
<ConvexProvider client={convex}>{children}</ConvexProvider>
{{else}}
{{#unless (eq api "none")}}
<QueryClientProvider client={queryClient}>
{{#if (eq api "orpc")}}
<ORPCContext.Provider value={orpc}>
{children}
</ORPCContext.Provider>
{{/if}}
{{#if (eq api "trpc")}}
{children}
{{/if}}
<ReactQueryDevtools />
</QueryClientProvider>
{{else}}
{children}
{{/if}}
</QueryClientProvider>
{{else}}
{children}
{{/unless}}
{{/if}}
<Toaster richColors />
</ThemeProvider>
) }
{{/unless}}
{{/if}}
<Toaster richColors />
</ThemeProvider>
);
}

View File

@@ -36,7 +36,6 @@
},
"devDependencies": {
"@tanstack/react-router-devtools": "^1.114.3",
"@tanstack/react-query-devtools": "^5.71.10",
"@testing-library/dom": "^10.4.0",
"@testing-library/react": "^16.2.0",
"@types/react": "^19.0.8",