logaretm / villus

🏎 A tiny and fast GraphQL client for Vue.js

Home Page:https://villus.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to use in e.g. Pinia

MidasLamb opened this issue · comments

Hi, I'm pretty new to Vue3, and I'm wondering how I would need to go about invoking an API request using Villus in e.g. an action inside a Pinia Store?

It gives the following error:
image

Even though I useClient in the Store right before the call.

If you could help me out I'd love to open a PR to update the documentation with an example as well

Do you mind creating an example for this? you can use codesandbox or stackblitz and I will be happy to take a look.

I don't think this is because of Pinia specifically, related: #146
the error is correlated to the yellow warning above which has something to do with provide()ing / inject()ing

@fanckush You are right, when it comes to provide/inject many things could go wrong which is why I wanted to see how exactly the OP is using Pinia with villus.

I may add an official example this weekend to try to answer this.

commented

@logaretm Thank you for your great work of villus first, it's awesome.
I have made this example here: https://codesandbox.io/s/mystifying-nobel-vy0r3x?file=/src/main.ts .
Using useQuery outside of setup will encounter this, and in pinia I only can import the villusClient to execute query. though it works , I also really like to useQuery api to manage the queries. Hope there is some solutions or some ideas to use useQuery outside of setup()

Thanks to @GavinXue in #156 this is much easier to do now in 1.1.0 that is If you plan to use useQuery and others in store actions.

However Pinia offers an official composable way to do this. An official example was added:

https://villus.logaretm.com/examples/state-store-pinia

Villus works with PInia for Vue 3, but I have a problem making it work with Vue 2 https://gist.github.com/hipertracker/3676ae8a5661f7d7423982188cc265fe

@hipertracker Can you get that in a repo I can test?

@hipertracker Can you get that in a repo I can test?

I was wrong, Vue 2 also works https://gist.github.com/hipertracker/0682f2c88774cc5274c18f36db2e0a64