@tanstack/create 0.63.1 → 0.63.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @tanstack/create
2
2
 
3
+ ## 0.63.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Fix Tanstack Query Integration ([#418](https://github.com/TanStack/cli/pull/418))
8
+
3
9
  ## 0.63.1
4
10
 
5
11
  ### Patch Changes
@@ -25,18 +25,7 @@ export const trpcClient = createTRPCClient<TRPCRouter>({
25
25
  ],
26
26
  });
27
27
 
28
- let context:
29
- | {
30
- queryClient: QueryClient
31
- trpc: ReturnType<typeof createTRPCOptionsProxy<TRPCRouter>>
32
- }
33
- | undefined
34
-
35
28
  export function getContext() {
36
- if (context) {
37
- return context
38
- }
39
-
40
29
  const queryClient = new QueryClient({
41
30
  defaultOptions: {
42
31
  dehydrate: { serializeData: superjson.serialize },
@@ -48,7 +37,7 @@ export function getContext() {
48
37
  client: trpcClient,
49
38
  queryClient: queryClient,
50
39
  });
51
- context = {
40
+ const context = {
52
41
  queryClient,
53
42
  trpc: serverHelpers,
54
43
  }
@@ -56,56 +45,30 @@ export function getContext() {
56
45
  return context
57
46
  }
58
47
 
59
- export default function TanStackQueryProvider({
48
+ export default function TanstackQueryProvider({
60
49
  children,
50
+ context,
61
51
  }: {
62
- children: ReactNode
52
+ children: ReactNode,
53
+ context: ReturnType<typeof getContext>
63
54
  }) {
64
- const { queryClient } = getContext()
55
+ const { queryClient } = context
65
56
 
66
57
  return (
67
- <QueryClientProvider client={queryClient}>
68
- <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
69
- {children}
70
- </TRPCProvider>
71
- </QueryClientProvider>
58
+ <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
59
+ {children}
60
+ </TRPCProvider>
72
61
  )
73
62
  }
74
63
  <% } else { %>
75
- import type { ReactNode } from 'react'
76
- import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
77
-
78
- let context:
79
- | {
80
- queryClient: QueryClient
81
- }
82
- | undefined
64
+ import { QueryClient } from '@tanstack/react-query'
83
65
 
84
66
  export function getContext() {
85
- if (context) {
86
- return context
87
- }
88
-
89
67
  const queryClient = new QueryClient();
90
68
 
91
- context = {
69
+ return {
92
70
  queryClient,
93
71
  }
94
-
95
- return context
96
- }
97
-
98
- export default function TanStackQueryProvider({
99
- children,
100
- }: {
101
- children: ReactNode
102
- }) {
103
- const { queryClient } = getContext()
104
-
105
- return (
106
- <QueryClientProvider client={queryClient}>
107
- {children}
108
- </QueryClientProvider>
109
- )
110
72
  }
73
+ export default function TanstackQueryProvider() {}
111
74
  <% } %>
@@ -18,11 +18,6 @@
18
18
  }
19
19
  ],
20
20
  "integrations": [
21
- {
22
- "type": "provider",
23
- "path": "src/integrations/tanstack-query/root-provider.tsx",
24
- "jsName": "TanStackQueryProvider"
25
- },
26
21
  {
27
22
  "type": "devtools",
28
23
  "path": "src/integrations/tanstack-query/devtools.tsx",
@@ -1,22 +1,40 @@
1
1
  import { createRouter as createTanStackRouter } from '@tanstack/react-router'
2
2
  import { routeTree } from './routeTree.gen'
3
3
  <% if (addOnEnabled['tanstack-query']) { %>
4
- import { getContext } from './integrations/tanstack-query/root-provider'
4
+ import type { ReactNode } from 'react'
5
+ import { QueryClient } from '@tanstack/react-query'
6
+ import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query";
7
+ import TanstackQueryProvider, { getContext } from './integrations/tanstack-query/root-provider'
5
8
  <% } %>
6
9
 
7
10
  export function getRouter() {
11
+ <% if (addOnEnabled['tanstack-query']) { %>
12
+ const context = getContext();
13
+ <% } %>
14
+
8
15
  const router = createTanStackRouter({
9
- routeTree,
10
- <% if (addOnEnabled['tanstack-query']) { %>
11
- context: getContext(),
12
- <% } else if (addOnEnabled['apollo-client']) { %>
16
+ routeTree,<% if (addOnEnabled['tanstack-query']) { %>
17
+ context,<% } else if (addOnEnabled['apollo-client']) { %>
13
18
  context: {} as any,
14
19
  <% } %>
15
20
  scrollRestoration: true,
16
21
  defaultPreload: 'intent',
17
22
  defaultPreloadStaleTime: 0,
23
+ <% if (addOnEnabled.tRPC) { %>
24
+ Wrap: (props: { children: ReactNode }) => {
25
+ return (
26
+ <TanstackQueryProvider context={context}>
27
+ {props.children}
28
+ </TanstackQueryProvider>
29
+ );
30
+ },
31
+ <% } %>
18
32
  })
19
33
 
34
+ <% if (addOnEnabled['tanstack-query']) { %>
35
+ setupRouterSsrQueryIntegration({ router, queryClient: context.queryClient })
36
+ <% } %>
37
+
20
38
  return router
21
39
  }
22
40
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/create",
3
- "version": "0.63.1",
3
+ "version": "0.63.2",
4
4
  "description": "TanStack Application Builder Engine",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -25,18 +25,7 @@ export const trpcClient = createTRPCClient<TRPCRouter>({
25
25
  ],
26
26
  });
27
27
 
28
- let context:
29
- | {
30
- queryClient: QueryClient
31
- trpc: ReturnType<typeof createTRPCOptionsProxy<TRPCRouter>>
32
- }
33
- | undefined
34
-
35
28
  export function getContext() {
36
- if (context) {
37
- return context
38
- }
39
-
40
29
  const queryClient = new QueryClient({
41
30
  defaultOptions: {
42
31
  dehydrate: { serializeData: superjson.serialize },
@@ -48,7 +37,7 @@ export function getContext() {
48
37
  client: trpcClient,
49
38
  queryClient: queryClient,
50
39
  });
51
- context = {
40
+ const context = {
52
41
  queryClient,
53
42
  trpc: serverHelpers,
54
43
  }
@@ -56,56 +45,30 @@ export function getContext() {
56
45
  return context
57
46
  }
58
47
 
59
- export default function TanStackQueryProvider({
48
+ export default function TanstackQueryProvider({
60
49
  children,
50
+ context,
61
51
  }: {
62
- children: ReactNode
52
+ children: ReactNode,
53
+ context: ReturnType<typeof getContext>
63
54
  }) {
64
- const { queryClient } = getContext()
55
+ const { queryClient } = context
65
56
 
66
57
  return (
67
- <QueryClientProvider client={queryClient}>
68
- <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
69
- {children}
70
- </TRPCProvider>
71
- </QueryClientProvider>
58
+ <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
59
+ {children}
60
+ </TRPCProvider>
72
61
  )
73
62
  }
74
63
  <% } else { %>
75
- import type { ReactNode } from 'react'
76
- import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
77
-
78
- let context:
79
- | {
80
- queryClient: QueryClient
81
- }
82
- | undefined
64
+ import { QueryClient } from '@tanstack/react-query'
83
65
 
84
66
  export function getContext() {
85
- if (context) {
86
- return context
87
- }
88
-
89
67
  const queryClient = new QueryClient();
90
68
 
91
- context = {
69
+ return {
92
70
  queryClient,
93
71
  }
94
-
95
- return context
96
- }
97
-
98
- export default function TanStackQueryProvider({
99
- children,
100
- }: {
101
- children: ReactNode
102
- }) {
103
- const { queryClient } = getContext()
104
-
105
- return (
106
- <QueryClientProvider client={queryClient}>
107
- {children}
108
- </QueryClientProvider>
109
- )
110
72
  }
73
+ export default function TanstackQueryProvider() {}
111
74
  <% } %>
@@ -18,11 +18,6 @@
18
18
  }
19
19
  ],
20
20
  "integrations": [
21
- {
22
- "type": "provider",
23
- "path": "src/integrations/tanstack-query/root-provider.tsx",
24
- "jsName": "TanStackQueryProvider"
25
- },
26
21
  {
27
22
  "type": "devtools",
28
23
  "path": "src/integrations/tanstack-query/devtools.tsx",
@@ -1,22 +1,40 @@
1
1
  import { createRouter as createTanStackRouter } from '@tanstack/react-router'
2
2
  import { routeTree } from './routeTree.gen'
3
3
  <% if (addOnEnabled['tanstack-query']) { %>
4
- import { getContext } from './integrations/tanstack-query/root-provider'
4
+ import type { ReactNode } from 'react'
5
+ import { QueryClient } from '@tanstack/react-query'
6
+ import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query";
7
+ import TanstackQueryProvider, { getContext } from './integrations/tanstack-query/root-provider'
5
8
  <% } %>
6
9
 
7
10
  export function getRouter() {
11
+ <% if (addOnEnabled['tanstack-query']) { %>
12
+ const context = getContext();
13
+ <% } %>
14
+
8
15
  const router = createTanStackRouter({
9
- routeTree,
10
- <% if (addOnEnabled['tanstack-query']) { %>
11
- context: getContext(),
12
- <% } else if (addOnEnabled['apollo-client']) { %>
16
+ routeTree,<% if (addOnEnabled['tanstack-query']) { %>
17
+ context,<% } else if (addOnEnabled['apollo-client']) { %>
13
18
  context: {} as any,
14
19
  <% } %>
15
20
  scrollRestoration: true,
16
21
  defaultPreload: 'intent',
17
22
  defaultPreloadStaleTime: 0,
23
+ <% if (addOnEnabled.tRPC) { %>
24
+ Wrap: (props: { children: ReactNode }) => {
25
+ return (
26
+ <TanstackQueryProvider context={context}>
27
+ {props.children}
28
+ </TanstackQueryProvider>
29
+ );
30
+ },
31
+ <% } %>
18
32
  })
19
33
 
34
+ <% if (addOnEnabled['tanstack-query']) { %>
35
+ setupRouterSsrQueryIntegration({ router, queryClient: context.queryClient })
36
+ <% } %>
37
+
20
38
  return router
21
39
  }
22
40