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 = { export const metadata: Metadata = {
title: "Create Next App", title: "{{projectName}}",
description: "Generated by create next app", description: "{{projectName}}",
}; };
export default function RootLayout({ export default function RootLayout({

View File

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

View File

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