React
Using TanStack Query Firebase with React
To get started using TanStack Query Firebase with React, you will need to install the following packages:
npm i --save firebase @tanstack/react-query @tanstack-query-firebase/react
Both firebase and @tanstack/react-query are peer dependencies of @tanstack-query-firebase/react.
Usage
TanStack Query Firebase provides a hands-off approach to integrate with TanStack Query - you are still responsible for both setting up Firebase in your application and configuring TanStack Query.
If you haven't already done so, initialize your Firebase project and configure TanStack Query:
import { initializeApp } from 'firebase/app';
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
//...
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Create a TanStack Query client instance
const queryClient = new QueryClient()
function App() {
return (
// Provide the client to your App
<QueryClientProvider client={queryClient}>
<MyApplication />
</QueryClientProvider>
)
}
render(<App />, document.getElementById('root'))
Next, you can start to use the hooks provided by @tanstack-query-firebase/react. For example, to
fetch a document from Firestore:
import { getFirestore, doc } from 'firebase/firestore';
import { useDocumentQuery } from '@tanstack-query-firebase/react/firestore';
// Get a Firestore instance using the initialized Firebase app instance
const firestore = getFirestore(app);
function MyApplication() {
// Create a document reference using Firestore
const docRef = doc(firestore, 'cities', 'SF');
// Fetch the document using the useDocumentQuery hook
const query = useDocumentQuery(docRef);
if (query.isLoading) {
return <p>Loading data...</p>;
}
if (query.isError) {
return <p>Error fetching data: {query.error.code}</p>;
}
// The successful result of the query is a DocumentSnapshot from Firebase
const snapshot = query.data;
if (!snapshot.exists()) {
return <p>Document does not exist</p>;
}
const data = snapshot.data();
return (
<div>
<h1>{data.name}</h1>
<p>{data.city}</p>
</div>
);
}
TanStack Query Firebase provides hooks for Firebase services including Authentication, Firestore, Realtime Database, and Data Connect, supporting both mutations and queries.
See the Realtime Database documentation for listener and write hooks via @tanstack-query-firebase/react/database.