feat: add vue-query

[ozum]

@wobsoriano, thanks for this library. I created this PR hoping it will help you to add vue-query support.

I'm unfamiliar with tRPC and vue-query. I followed code from tRPC's react-query repository, but their integration contains react-specific parts and is very different than yours. I tried to stick with your coding style, but assume this PR is alpha quality. If you find it useful, please use it as a starting point.

Changes:

• Backward compatible. Didn't change trpc/client, new feature is added to trpc-nuxt/client-vue-query.
• Added: useQuery() and useMutation() methods.
• Added: Query key generation for Vue Query based on server method path and method parameters as in the tRPC react query.
• Added: Simple Vue Query to the Usage docs.

Notes:

• Types are copied from trpc library.

Caveats:

• router object in plugins/2.client.ts and server/api/trpc/[trpc].ts generates TS warning:

Type 'CreateRouterInner<RootConfig<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { hello: BuildProcedure<...>; login: BuildProcedure<...>; }>' does not satisfy the constraint 'Router<AnyRouterDef<AnyRootConfig, any>>'.
  Types of property 'createCaller' are incompatible.

@wobsoriano, I cannot fix this type. This didn't affect the types of the client-side, they worked as expected.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
trpc-nuxt	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Jan 17, 2023 at 9:28PM (UTC)

[wobsoriano]

Looking into this. Thanks!

[kylegl]

Hi @ozum,

Nice work on this pr. I was playing around with it and I was having trouble using optimistic updates on mutations. This is how I had it setup. Doesn't seem like the onMutate hook is called. Any idea why this doesn't work?

export function useAddPost() {
  const { $client } = useNuxtApp()
  const queryClient = useQueryClient()

  const { mutateAsync } = $client.post.add.useMutation({
    onMutate: async (input) => {
      await queryClient.cancelQueries(['post.list'])
      const previousPosts = queryClient.getQueryData(['post.list'])
      const newPost = {
        id: '__temp__id',
        createdAt: new Date(),
        ...input,
      }

      queryClient.setQueryData(['post.list'],
        (old) => {
          return old ? [newPost, ...old] : undefined
        },
      )

      return { previousPosts }
    },
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['post.list'] }),
  })

[ozum]

@kylegl, since I'm unfamiliar with tRPC and vue-query, I cannot help yet. I developed this PR as a starting point if @wobsoriano wants to implement vue-query.

IMHO, currently, it seems best to use vue-query manually with trpc-nuxt. I need a clarification from @wobsoriano at #66, on how to use $fetch, so it can be used manually until vue-qery support is implemented.

Also, we should ask for general tan-stack query (vue-query) support in the tRPC itself because it is the most appropriate place to implement it. See issue and request here.

[adaliszk]

With the risk of necroing this, are there any plans to merge this? It looks promising to me, and I would for sure love to work with Tanstack Query in Vueland.

[Colonel-Sandvich]

Sorry to hijack this thread but I've just released a new package that aims to be the integration you're looking for.
It's heavily inspired by @trpc/react-query and @wobsoriano's work in this package.

It can be found here: https://github.com/Colonel-Sandvich/trpc-vue-query

It's still incredibly early days but it has useQuery(), useMutation() , invalidate() and queryKey() so far.

Any issues or PRs are absolutely welcomed.

[wobsoriano]

First of all, @ozum I appreciate the effort you put in here. I'm sorry I did not merge this in, as I realized that it would be harder to maintain it in the future as I really just want to use the built-in composables in Nuxt.

@Colonel-Sandvich that is so awesome, can I link your project in trpc-nuxt's docs if they want to use vue-query instead of built-in Nuxt composables?

Thank you everyone!

[Colonel-Sandvich]

Absolutely feel free to link to my project. Thanks for making this project as it definitely was my main inspiration (and I've definitely copied some code too 😁). I'll credit you somewhere in the README if you want. I can link to trpc-nuxt in my README too if people want a more mature package with working SSR etc