Vue Query Support

[cpannwitz]

Hey, I'd like to ask if support for vue-query would be possible? I've already seen the other request for Svelte (#186 )

Would also like to help with development. :)

[psteinroe]

hey @cpannwitz, thanks for opening the issue!

I would love to add vue support, but I have never worked with it. if you support we can make it happen! It would be a lot of help if you could add a new "empty" package, and maybe try to implement it from how the react-query package works. if you are lost at some point, I will jump in and try to help.

[cpannwitz]

Hey @psteinroe , started the integration here: https://github.com/cpannwitz/supabase-cache-helpers/tree/feature/add-vue-query-package

First thing I noticed is that the @tanstack/vue-query lib doesn't export the type UseQueryResult. (see here) Do you perhaps know, if this is intentional?

Also I've encountered some type mismatches in the mutate hooks (eg. use-delete-mutation).

Above all, I'm VERY unexperienced with the PNPM / Workspace workflow and all the tooling around your lib. Would like to get some guidance from you :) (for example, pnpm i wouldn't run, until I specified the exact PNPM version in the root package.json - "packageManager": "[email protected]").

[psteinroe]

hey @cpannwitz, awesome!

First thing I noticed is that the @tanstack/vue-query lib doesn't export the type UseQueryResult. (see here) Do you perhaps know, if this is intentional?

I went through the cue-query code and it seems like it just has a different name: https://github.com/TanStack/query/blob/4d37cfc733744501b0b4423c721cc038206994e8/packages/vue-query/src/useQuery.ts#L82-L85

Also I've encountered some type mismatches in the mutate hooks (eg. use-delete-mutation).

can you specify what mismatch?

Above all, I'm VERY unexperienced with the PNPM / Workspace workflow and all the tooling around your lib. Would like to get some guidance from you :) (for example, pnpm i wouldn't run, until I specified the exact PNPM version in the root package.json - "packageManager": "[email protected]").

sure! so far your setup looks good. how are vue libraries built? I thought it requires vite?

[cpannwitz]

Ah, thanks, I guess that works. Still, the return type of the useQuery function doesn't work yet, but I'll fiddle around and try to get it into working state.

There are some mismatches caused by different return types of the useMutation hook (react-query vs vue-query). Especially mutationFn: async (input) =>, where input is void instead of Partial<T["Row"]>. Will fiddle around also, let's see :)

Hmm, I don't really know, as I'm actually a React dev thrown into the Vue world. But I've found this example, also with tsup. They are using vue-demi for library creation, which I guess is a thing for building Vue libs.

[cpannwitz]

@psteinroe So far I've managed to add packages postgrest-vue-query and lately storage-vue-query. What's missing:

• fix type error here
• adapt tests to use @testing-library/vue
• make sure, that it actually builds and works (would need help here, to determine how this workspace/package actually works, tooling-wise)

[cpannwitz]

Short update: managed to convert all tests (did not run them yet). Main blockers currently are the type error mentioned in the previous post, which I am yet unable to solve, and missing information about how to properly test and build the libs.

[psteinroe]

Sorry for the delayed reply. I am s bit busy right now, but will try to look into this next week. 🙏🏼

[cpannwitz]

Thanks, I'm also back from vaycay

[psteinroe]

hey @cpannwitz, can you open a pr against this repo? makes it easier to review and also to checkout the code. will take a look at the (admittedly weird) type error and run tests etc!