Vite Vue Query Hooks For Firebase Database, Image Storage, Mutations and Queries in Vue JS

Using ViteJS Vue Query Hooks For Firebase Database and Image Storage, Mutations and Queries in VueJS
#firebase #vuequery #vite
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Vue Query package provides hooks for fetching, caching and updating asynchronous data in Vue. Based on react-query. All main concepts are inherited from the main package. Please also check the react query docs

I love ReactQuery so I thought it would be great to checkout Vue Query and put together a quick code walkthrough of a simple project. I used Firebase because I already had a project in place, but it could have been any database provider, Supabase might be next !!

Vue Query: Fetch, cache, and update server data using queries and mutations | VueJS Tutorial

00:00 Intro
01:32 Setting Up Vue Vite Project
07:40 Saving Firebase Credentials in .env
11:20 Vue Query and useQuery to List Firebase Collection
18:02 Vue Query and useQuery to Get Document From Firebase Collection
24:32 Vue Query and useMutation to Add Document To Firebase Collection and Firebase Storage
34:00 Vue Query and useMutation to Delete Document From Firebase CollectionStorage
38:00 Wrap Up

--------------------------------
-------------------------------

LINKS
----------

#firebase #vuequery #vite #vue #vuejs

-~-~~-~~~-~~-~-
Please watch: "Getting Started With Appwrite, Vue JS Ionic Framework & Capacitor"
-~-~~-~~~-~~-~-

[AaronSaundersCI]

If you enjoyed this video - please consider subscribing 🙌

[SLRModShop]

That was a great video, now I can go to the documentation better equipped =) Good thing I had used Firebase previously, made this video a breeze to me. Thanks for sharing mate!

[namng]

hello, i very love your video, can you make a little video about vue query

[billpliske]

Looking for an example of exporting a GraphQL query, and Vue Query making use of that. Any thoughts? (still Googling)

[SLRModShop]

The doc isn't 100% clear on the VueQueryDevTool... It's deprecated or not? Any idea?

[MarkTallentire]

This might have changed since the video was created but you don't need to bring in QueryClient every time you want to use useQuery, as you mentioned if you were using typescript it would just show it as being unused everywhere you brought it in. As far as I can see from the docs QueryClient is only needed when doing mutations etc.. but not for the standard useQuery, I'm guessing you can also use it to adjust the default config globally, need to play around with it a bit more to understand it fully.