Tanstack and app routing
I seem to get quite a bit of issues when using the t3 - app router.
Import trace for requested module:
./src/trpc/react.tsx
○ Compiling /not-found ... <-- Supposed to be /dashboard
⨯ ./node_modules/@trpc/react-query/dist/createHooksInternal-bdff7171.mjs
Attempted import error: 'useQuery' is not exported from '@tanstack/react-query' (imported as 'useQuery').
Import trace for requested module:
./src/trpc/react.tsx
○ Compiling /not-found ... <-- Supposed to be /dashboard
⨯ ./node_modules/@trpc/react-query/dist/createHooksInternal-bdff7171.mjs
Attempted import error: 'useQuery' is not exported from '@tanstack/react-query' (imported as 'useQuery').
const { data: organisation } = api.organisation.getorganisation.useQuery();
<QueryClientProvider client={queryClient}>
<api.Provider client={trpcClient} queryClient={queryClient}>
{props.children}
</api.Provider>
</QueryClientProvider>
const { data: organisation } = api.organisation.getorganisation.useQuery();
<QueryClientProvider client={queryClient}>
<api.Provider client={trpcClient} queryClient={queryClient}>
{props.children}
</api.Provider>
</QueryClientProvider>
3 Replies
try
api.organisation.getorganisation.query();It should be useQuery as it comes from the api/trpc/react version.
seems to throw this also
app-index.js:32 Failed to fetch RSC payload for http://localhost:3000/. Falling back to browser navigation. TypeError: Failed to fetch
at fetchServerResponse (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/router-reducer/fetch-server-response.js:55:27)
at fastRefreshReducerImpl (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/router-reducer/reducers/fast-refresh-reducer.js:30:123)
at clientReducer (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/router-reducer/router-reducer.js:41:67)
at Object.action (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/shared/lib/router/action-queue.js:140:55)
at runAction (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/shared/lib/router/action-queue.js:49:38)
at dispatchAction (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/shared/lib/router/action-queue.js:105:9)
at Object.dispatch (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/shared/lib/router/action-queue.js:135:40)
at eval (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/use-reducer-with-devtools.js:130:21)
at eval (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:242:25)
at startTransition (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react/cjs/react.development.js:2655:5)
at Object.fastRefresh (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:241:48)
at eval (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:243:28)
at startTransition (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react/cjs/react.development.js:2655:5)
at processMessage (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:241:44)
at WebSocket.handler (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:362:21)
app-index.js:32 Failed to fetch RSC payload for http://localhost:3000/. Falling back to browser navigation. TypeError: Failed to fetch
at fetchServerResponse (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/router-reducer/fetch-server-response.js:55:27)
at fastRefreshReducerImpl (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/router-reducer/reducers/fast-refresh-reducer.js:30:123)
at clientReducer (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/router-reducer/router-reducer.js:41:67)
at Object.action (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/shared/lib/router/action-queue.js:140:55)
at runAction (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/shared/lib/router/action-queue.js:49:38)
at dispatchAction (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/shared/lib/router/action-queue.js:105:9)
at Object.dispatch (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/shared/lib/router/action-queue.js:135:40)
at eval (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/use-reducer-with-devtools.js:130:21)
at eval (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:242:25)
at startTransition (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react/cjs/react.development.js:2655:5)
at Object.fastRefresh (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:241:48)
at eval (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:243:28)
at startTransition (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react/cjs/react.development.js:2655:5)
at processMessage (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:241:44)
at WebSocket.handler (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:362:21)
ah gotcha