@tanstack/create 0.63.0 → 0.63.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tanstack/create
 
+## 0.63.2
+
+### Patch Changes
+
+- Fix Tanstack Query Integration ([#418](https://github.com/TanStack/cli/pull/418))
+
+## 0.63.1
+
+### Patch Changes
+
+- Fix the Neon add-on Vite plugin template to use the `postgres` export from `vite-plugin-neon-new` so newly scaffolded apps start without import errors and avoid deprecated plugin package warnings. ([`ddfaaaa`](https://github.com/TanStack/cli/commit/ddfaaaac81cdc60965052b82da1f1482155c560c))
+
 ## 0.63.0
 
 ### Minor Changes

package/dist/frameworks/react/add-ons/neon/README.md

@@ -1,6 +1,6 @@
 ## Setting up Neon
 
-When running the `dev` command, the `@neondatabase/vite-plugin-postgres` will identify there is not a database setup. It will then create and seed a claimable database.
+When running the `dev` command, `vite-plugin-neon-new` will identify there is not a database setup. It will then create and seed a claimable database.
 
 It is the same process as [Neon Launchpad](https://neon.new).
 

package/dist/frameworks/react/add-ons/neon/assets/neon-vite-plugin.ts

@@ -1,6 +1,6 @@
-import { postgresPlugin } from '@neondatabase/vite-plugin-postgres'
+import { postgres } from 'vite-plugin-neon-new'
 
-export default postgresPlugin({
+export default postgres({
   seed: {
     type: 'sql-script',
     path: 'db/init.sql',

package/dist/frameworks/react/add-ons/neon/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
     "@neondatabase/serverless": "^1.0.2",
-    "@neondatabase/vite-plugin-postgres": "^0.7.0"
+    "vite-plugin-neon-new": "^0.8.0"
   }
 }

package/dist/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs

@@ -25,18 +25,7 @@ export const trpcClient = createTRPCClient<TRPCRouter>({
   ],
 });
 
-let context:
-  | {
-      queryClient: QueryClient
-      trpc: ReturnType<typeof createTRPCOptionsProxy<TRPCRouter>>
-    }
-  | undefined
-
 export function getContext() {
-  if (context) {
-    return context
-  }
-
   const queryClient = new QueryClient({
     defaultOptions: {
       dehydrate: { serializeData: superjson.serialize },
@@ -48,7 +37,7 @@ export function getContext() {
     client: trpcClient,
     queryClient: queryClient,
   });
-  context = {
+  const context = {
     queryClient,
     trpc: serverHelpers,
   }
@@ -56,56 +45,30 @@ export function getContext() {
   return context
 }
 
-export default function TanStackQueryProvider({
+export default function TanstackQueryProvider({
   children,
+  context,
 }: {
-  children: ReactNode
+  children: ReactNode,
+  context: ReturnType<typeof getContext>
 }) {
-  const { queryClient } = getContext()
+  const { queryClient } = context
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
-        {children}
-      </TRPCProvider>
-    </QueryClientProvider>
+    <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
+      {children}
+    </TRPCProvider>
   )
 }
 <% } else { %>
-import type { ReactNode } from 'react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-
-let context:
-  | {
-      queryClient: QueryClient
-    }
-  | undefined
+import { QueryClient } from '@tanstack/react-query'
 
 export function getContext() {
-  if (context) {
-    return context
-  }
-
   const queryClient = new QueryClient();
 
-  context = {
+  return {
     queryClient,
   }
-
-  return context
-}
-
-export default function TanStackQueryProvider({
-  children,
-}: {
-  children: ReactNode
-}) {
-  const { queryClient } = getContext()
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      {children}
-    </QueryClientProvider>
-  )
 }
+export default function TanstackQueryProvider() {}
 <% } %>

package/dist/frameworks/react/add-ons/tanstack-query/info.json

@@ -18,11 +18,6 @@
     }
   ],
   "integrations": [
-    {
-      "type": "provider",
-      "path": "src/integrations/tanstack-query/root-provider.tsx",
-      "jsName": "TanStackQueryProvider"
-    },
     {
       "type": "devtools",
       "path": "src/integrations/tanstack-query/devtools.tsx",

package/dist/frameworks/react/project/base/src/router.tsx.ejs

@@ -1,22 +1,40 @@
 import { createRouter as createTanStackRouter } from '@tanstack/react-router'
 import { routeTree } from './routeTree.gen'
 <% if (addOnEnabled['tanstack-query']) { %>
-import { getContext } from './integrations/tanstack-query/root-provider'
+import type { ReactNode } from 'react'
+import { QueryClient } from '@tanstack/react-query'
+import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query";
+import TanstackQueryProvider, { getContext } from './integrations/tanstack-query/root-provider'
 <% } %>
 
 export function getRouter() {
+  <% if (addOnEnabled['tanstack-query']) { %>
+  const context = getContext();
+  <% } %>
+  
   const router = createTanStackRouter({
-    routeTree,
-<% if (addOnEnabled['tanstack-query']) { %>
-    context: getContext(),
-<% } else if (addOnEnabled['apollo-client']) { %>
+    routeTree,<% if (addOnEnabled['tanstack-query']) { %>
+    context,<% } else if (addOnEnabled['apollo-client']) { %>
     context: {} as any,
 <% } %>
     scrollRestoration: true,
     defaultPreload: 'intent',
     defaultPreloadStaleTime: 0,
+    <% if (addOnEnabled.tRPC) { %>
+    Wrap: (props: { children: ReactNode }) => {
+      return (
+        <TanstackQueryProvider context={context}>
+            {props.children}
+        </TanstackQueryProvider>
+        );
+      },
+    <% } %>
   })
 
+<% if (addOnEnabled['tanstack-query']) { %>
+  setupRouterSsrQueryIntegration({ router, queryClient: context.queryClient })
+<% } %>
+
   return router
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/create",
-  "version": "0.63.0",
+  "version": "0.63.2",
   "description": "TanStack Application Builder Engine",
   "type": "module",
   "main": "./dist/index.js",

package/src/frameworks/react/add-ons/neon/README.md

@@ -1,6 +1,6 @@
 ## Setting up Neon
 
-When running the `dev` command, the `@neondatabase/vite-plugin-postgres` will identify there is not a database setup. It will then create and seed a claimable database.
+When running the `dev` command, `vite-plugin-neon-new` will identify there is not a database setup. It will then create and seed a claimable database.
 
 It is the same process as [Neon Launchpad](https://neon.new).
 

package/src/frameworks/react/add-ons/neon/assets/neon-vite-plugin.ts

@@ -1,6 +1,6 @@
-import { postgresPlugin } from '@neondatabase/vite-plugin-postgres'
+import { postgres } from 'vite-plugin-neon-new'
 
-export default postgresPlugin({
+export default postgres({
   seed: {
     type: 'sql-script',
     path: 'db/init.sql',

package/src/frameworks/react/add-ons/neon/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
     "@neondatabase/serverless": "^1.0.2",
-    "@neondatabase/vite-plugin-postgres": "^0.7.0"
+    "vite-plugin-neon-new": "^0.8.0"
   }
 }

package/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs

@@ -25,18 +25,7 @@ export const trpcClient = createTRPCClient<TRPCRouter>({
   ],
 });
 
-let context:
-  | {
-      queryClient: QueryClient
-      trpc: ReturnType<typeof createTRPCOptionsProxy<TRPCRouter>>
-    }
-  | undefined
-
 export function getContext() {
-  if (context) {
-    return context
-  }
-
   const queryClient = new QueryClient({
     defaultOptions: {
       dehydrate: { serializeData: superjson.serialize },
@@ -48,7 +37,7 @@ export function getContext() {
     client: trpcClient,
     queryClient: queryClient,
   });
-  context = {
+  const context = {
     queryClient,
     trpc: serverHelpers,
   }
@@ -56,56 +45,30 @@ export function getContext() {
   return context
 }
 
-export default function TanStackQueryProvider({
+export default function TanstackQueryProvider({
   children,
+  context,
 }: {
-  children: ReactNode
+  children: ReactNode,
+  context: ReturnType<typeof getContext>
 }) {
-  const { queryClient } = getContext()
+  const { queryClient } = context
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
-        {children}
-      </TRPCProvider>
-    </QueryClientProvider>
+    <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
+      {children}
+    </TRPCProvider>
   )
 }
 <% } else { %>
-import type { ReactNode } from 'react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-
-let context:
-  | {
-      queryClient: QueryClient
-    }
-  | undefined
+import { QueryClient } from '@tanstack/react-query'
 
 export function getContext() {
-  if (context) {
-    return context
-  }
-
   const queryClient = new QueryClient();
 
-  context = {
+  return {
     queryClient,
   }
-
-  return context
-}
-
-export default function TanStackQueryProvider({
-  children,
-}: {
-  children: ReactNode
-}) {
-  const { queryClient } = getContext()
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      {children}
-    </QueryClientProvider>
-  )
 }
+export default function TanstackQueryProvider() {}
 <% } %>

package/src/frameworks/react/add-ons/tanstack-query/info.json

@@ -18,11 +18,6 @@
     }
   ],
   "integrations": [
-    {
-      "type": "provider",
-      "path": "src/integrations/tanstack-query/root-provider.tsx",
-      "jsName": "TanStackQueryProvider"
-    },
     {
       "type": "devtools",
       "path": "src/integrations/tanstack-query/devtools.tsx",

package/src/frameworks/react/project/base/src/router.tsx.ejs

@@ -1,22 +1,40 @@
 import { createRouter as createTanStackRouter } from '@tanstack/react-router'
 import { routeTree } from './routeTree.gen'
 <% if (addOnEnabled['tanstack-query']) { %>
-import { getContext } from './integrations/tanstack-query/root-provider'
+import type { ReactNode } from 'react'
+import { QueryClient } from '@tanstack/react-query'
+import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query";
+import TanstackQueryProvider, { getContext } from './integrations/tanstack-query/root-provider'
 <% } %>
 
 export function getRouter() {
+  <% if (addOnEnabled['tanstack-query']) { %>
+  const context = getContext();
+  <% } %>
+  
   const router = createTanStackRouter({
-    routeTree,
-<% if (addOnEnabled['tanstack-query']) { %>
-    context: getContext(),
-<% } else if (addOnEnabled['apollo-client']) { %>
+    routeTree,<% if (addOnEnabled['tanstack-query']) { %>
+    context,<% } else if (addOnEnabled['apollo-client']) { %>
     context: {} as any,
 <% } %>
     scrollRestoration: true,
     defaultPreload: 'intent',
     defaultPreloadStaleTime: 0,
+    <% if (addOnEnabled.tRPC) { %>
+    Wrap: (props: { children: ReactNode }) => {
+      return (
+        <TanstackQueryProvider context={context}>
+            {props.children}
+        </TanstackQueryProvider>
+        );
+      },
+    <% } %>
   })
 
+<% if (addOnEnabled['tanstack-query']) { %>
+  setupRouterSsrQueryIntegration({ router, queryClient: context.queryClient })
+<% } %>
+
   return router
 }