search

ap0nia / trpc-svelte-toolbox

🔥 tRPC + svelte integrations
https://trpc-svelte-toolbox.vercel.app
9 stars 1 forks source link

support svelte 4 / sveltekit 2.0 #4

Open canastro opened 1 year ago

canastro commented 1 year ago

Is it possible to release a version with a peer dep on svelte 4?

ap0nia commented 1 year ago

Sure! It's been a while since I've been active on this project, but I'm gonna tidy everything up when I get the chance :+1:

canastro commented 8 months ago

@ap0nia

Do you think you'll be able to pick up this? I've been trying other trpc + svelte-query libs and they don't seem to have the same set of features / work as well as this one. I tried to do the upgrade myself, but there are internals of trpc and svelte-query which I'm not familiar with.

PS: looking at the landscape, I'm not really sure why this library isn't more widely used.

ap0nia commented 8 months ago

I tried adjusting the peer dependency ranges for svelte and sveltekit, and published both packages under version 0.11.0. Let me know if this helps!

canastro commented 8 months ago

Thank you for the quick turnaround!

Theres only a couple of issues:

  1. When I throw a TRPCError in my RPC routes, the server completely crashes
  2. @tanstack/svelte-query needs to be upgraded to 5.x otherwise theres a unmet peer

1 TRPC crash

When using @sveltejs/kit@2.5.0 when I throw a TRPCError in my RPC routes, the server completely crashes:

TRPCClientError: {"_tag":"NotFoundException"}
    at TRPCClientError.from (/Users/myproject/node_modules/@trpc/client/dist/TRPCClientError-38f9a32a.mjs:27:20)
    at /Users/myproject/node_modules/@trpc/client/dist/httpBatchLink-d0f9eac9.mjs:189:60
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {meta: {…}, shape: {…}, data: {…}, name: 'TRPCClientError', stack: 'TRPCClientError: {"_tag":"NotFoundEx…ions (node:internal/process/task_queues:95:5)', …}

query.mjs:294
Uncaught TRPCClientError TRPCClientError: {"_tag":"NotFoundException"}
    at from (/Users/myproject/node_modules/@trpc/client/dist/TRPCClientError-38f9a32a.mjs:27:20)
    at <anonymous> (/Users/myproject/node_modules/@trpc/client/dist/httpBatchLink-d0f9eac9.mjs:189:60)
    at processTicksAndRejections (internal/process/task_queues:95:5)

If I keep using svelte@4 but downgrade to @sveltejs/kit@1.30.4, this crash does not happen. Not sure if this is something that needs to be solved in the @trpc/client, @trpc/server or @bevm0/trpc-svelte-query libraries.

PS: I'm using "@trpc/client": "^10.25.1" and "@trpc/server": "^10.25.1" just to make sure its aligned with the dependencies defined in this package.

2 @tanstack/svelte-query unmet peer

While installing I get:

└─┬ @tanstack/svelte-query 4.29.17
  └── ✕ unmet peer svelte@^3.54.0: found 4.2.11

When I tried to make this upgrade myself, this was the part that required dealing with svelte-query internals, as some things changed and broke @bevm0/trpc-svelte-query (at least the type compilation)

ap0nia commented 8 months ago

Thanks for bringing these to my attention! Could you provide a small reproduction repo that I can reference and fix the issues for?

canastro commented 8 months ago

I'll try to get a small repro this week 👍🏽

canastro commented 8 months ago

I've created this repo where you can see the issues that arise when you try to use @bevm0/trpc-svelte-query with the latest version of @tanstack/svelte-query.

  1. You can run npm run check to see a couple of TS issues in the API
  2. You can run the queries on routes /hello and /fail and see that it results in a client-side error 
@bevm0_trpc-svelte-query.js?v=89511a5a:899 Uncaught TypeError: Cannot read properties of undefined (reading 'type')
    at QueryObserver.onQueryUpdate (@bevm0_trpc-svelte-query.js?v=89511a5a:899:16)

I wasn't yet able to reproduce the issue where the server crashed when a TRPCError exception is thrown, so that might be something specific to my own project that I have to try to figure out.

ap0nia commented 8 months ago

Thanks, this is really helpful! I haven't used the tRPC + query stack in a while, so the demo will help me catch up 🙏 I assume that you're referring to this repository?

canastro commented 8 months ago

Ahaha yeah, completely forgot to paste the link!

ap0nia commented 8 months ago

I'm also having issues reproducing the total server failure you mentioned, so I don't think I'll be able to help much with that unfortunately.

As for the type definitions, it seems that svelte-query marks the queryKey as required sometimes, so I just specified Partial for all of the options that are provided to my library. Please try out the new version 0.11.2 and let me know if it helps!

canastro commented 8 months ago

I just tried this latest version in the example repo and got the following TS issues:

Loading svelte-check in workspace: /Users/r/dev/trpc-svelte-query-upgrade-issue
Getting Svelte diagnostics...

/Users/r/dev/trpc-svelte-query-upgrade-issue/src/routes/+layout.ts:21:5
Error: Type 'import("/Users/r/dev/trpc-svelte-query-upgrade-issue/node_modules/@tanstack/query-core/build/modern/queryClient-Ho-z40Sw").b' is not assignable to type 'import("/Users/r/dev/trpc-svelte-query-upgrade-issue/node_modules/@bevm0/trpc-svelte-query/node_modules/@tanstack/query-core/build/lib/queryClient").QueryClient'. 
                },
                { svelteQueryContext: queryClient }
        );

/Users/r/dev/trpc-svelte-query-upgrade-issue/src/routes/+layout.svelte:12:22
Error: Property '#private' is missing in type 'import("/Users/r/dev/trpc-svelte-query-upgrade-issue/node_modules/@bevm0/trpc-svelte-query/node_modules/@tanstack/query-core/build/lib/queryClient").QueryClient' but required in type 'import("/Users/r/dev/trpc-svelte-query-upgrade-issue/node_modules/@tanstack/query-core/build/modern/queryClient-Ho-z40Sw").b'. (ts)

<QueryClientProvider client={data.trpc.queryClient}>
        <div class="app">

And if I run the example and open http://localhost:5173/hello I get the following error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type')
    at QueryObserver.onQueryUpdate (@bevm0_trpc-svelte-query.js?v=a0b549e6:899:16)
    at chunk-PRRWIYVY.js?v=a0b549e6:918:16
    at Array.forEach (<anonymous>)
    at chunk-PRRWIYVY.js?v=a0b549e6:917:36
    at Object.batch (chunk-PRRWIYVY.js?v=a0b549e6:490:16)
    at _a4.dispatch_fn (chunk-PRRWIYVY.js?v=a0b549e6:916:17)
    at _a4.fetch (chunk-PRRWIYVY.js?v=a0b549e6:767:53)
    at QueryObserver.executeFetch (@bevm0_trpc-svelte-query.js?v=a0b549e6:668:37)
    at QueryObserver.onSubscribe (@bevm0_trpc-svelte-query.js?v=a0b549e6:550:14)
    at QueryObserver.subscribe (@bevm0_trpc-svelte-query.js?v=a0b549e6:35:10)
ap0nia commented 8 months ago

I see, it looks like I'll need to release a new version that actually targets svelte-query 5. I'll work on a canary release and get back to you 👍

ap0nia commented 7 months ago

I published version 0.12.0-canary on NPM and it seems to work on my local copy of your reproduction. Could you let me know if it works?

npm install @bevm0/trpc-svelte-query@canary
canastro commented 7 months ago

Awesome, I'll give it a try this week 👍🏽

canastro commented 7 months ago

My initial exploration seems that everything is working great. I'm waiting on some fixes on another library to be able to fully test and be 100% sure its all working as expected.

canastro commented 7 months ago

It seems like this error still persists (still not sure which library is the culprit :/ ):

1 TRPC crash

When using @sveltejs/kit@2.5.5 when I throw a TRPCError in my RPC routes, the server completely crashes:

TRPCClientError: {"_tag":"NotFoundException"}
    at TRPCClientError.from (/Users/myproject/node_modules/@trpc/client/dist/TRPCClientError-38f9a32a.mjs:27:20)
    at /Users/myproject/node_modules/@trpc/client/dist/httpBatchLink-d0f9eac9.mjs:189:60
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {meta: {…}, shape: {…}, data: {…}, name: 'TRPCClientError', stack: 'TRPCClientError: {"_tag":"NotFoundEx…ions (node:internal/process/task_queues:95:5)', …}

query.mjs:294
Uncaught TRPCClientError TRPCClientError: {"_tag":"NotFoundException"}
    at from (/Users/myproject/node_modules/@trpc/client/dist/TRPCClientError-38f9a32a.mjs:27:20)
    at <anonymous> (/Users/myproject/node_modules/@trpc/client/dist/httpBatchLink-d0f9eac9.mjs:189:60)
    at processTicksAndRejections (internal/process/task_queues:95:5)

If I keep using svelte@4 but downgrade to @sveltejs/kit@1.30.4, this crash does not happen. Not sure if this is something that needs to be solved in the @trpc/client, @trpc/server or @bevm0/trpc-svelte-query libraries.

PS: I'm using "@trpc/client": "^10.25.1" and "@trpc/server": "^10.25.1" just to make sure its aligned with the dependencies defined in this package.

ap0nia commented 7 months ago

Is that error occurring in the reproduction repo you provided? Or could you provide an update repo if that's necessary?

canastro commented 7 months ago

I'll try to update the repro and get that error working as well 👍🏽 (I've just now re-read this thread and noticed that I wasnt able to replicate that issue last time)