Components
Firestore Provider
Place a FirestoreProvider component at the top level of your app.
import { FirestoreProvider } from '@react-firebase/firestore'
// Before
const App = () => {
return <div>
This is my app
</div>
}
// After
const App = () => {
return (
<FirestoreProvider {...config} firebase={firebase}>
<div>
This is my app
</div>
</FirestoreProvider>
)
}
If you need to authenticate to access your data, check out @react-firebase/auth
Firestore Collection Example
<FirestoreCollection path="/user_bookmarks/" limit={1}>
{d => {
return d.isLoading ? "Loading" : <pre>{d.value}</pre>;
}}
</FirestoreCollection>
Firestore Document Example
<FirestoreDocument path="/user_bookmarks/G_K_1svqs">
{d => {
return d.isLoading ? "Loading" : <pre>{d.value}</pre>;
}}
</FirestoreDocument>;
Firestore Mutation
The FirestoreMutation allows you to render components that run Firebase mutations (update, set, add).
A setMutation function that returns a promise is provided to the children function.
FirebaseDatabaseMutation needs 3 props :
operation: "update" | "set" | "add"
Upsert (update or insert) data to Firestore example
<FirestoreMutation type="set" path="/user_bookmarks/G_K_5onxu">
{({ runMutation }) => {
return (
<div>
<h2> Mutate state </h2>
<button
onClick={() => {
runMutation({
nowOnCli: Date.now(),
nowOnServer: firebase.firestore.FieldValue.serverTimestamp()
}).then(res => {
console.log("Ran mutation ", res);
});
}}
>
Mutate Set
</button>
</div>
);
}}
</FirestoreMutation>
Batched Writes
Schedule a mutation with addMutationToBatch, and commit your changes with commit.
<FirestoreBatchedWrite>
{({ addMutationToBatch, commit }) => {
return (
<div>
<h2>Batched write</h2>
<button
onClick={() => {
console.log("adding to batch");
addMutationToBatch({
path: `user_bookmarks/G_K_5onxu/`,
value: { [`a-value-${Date.now()}`]: Date.now() },
type: "update"
});
}}
>
Add to batch
</button>
<button
onClick={() => {
console.log("committing to batch");
commit().then(() => {
console.log("Committed");
});
}}
>
Commit batch
</button>
</div>
);
}}
</FirestoreBatchedWrite>;
Complete Example
import firebase from "firebase/app";
import "firebase/firestore";
import {
FirestoreProvider,
FirestoreCollection,
FirestoreDocument
} from "react-firebase-firestore";
import ReactJson from "react-json-view";
const config = {
apiKey: credentials.apiKey,
authDomain: credentials.authDomain,
databaseURL: credentials.databaseURL,
projectId: credentials.projectId,
storageBucket: credentials.storageBucket,
messagingSenderId: credentials.messagingSenderId
};
const App = () => {
return (
<FirestoreProvider {...config} firebase={firebase}>
<div>oh hai</div>
<FirestoreDocument path="/user_bookmarks/G_K_1svqs">
{d => {
return d.loadingStatus === "ready" ? (
<ReactJson src={d} />
) : (
"Loading"
);
}}
</FirestoreDocument>
<div>
<h4>oh hai again</h4>
<FirestoreCollection path="/user_bookmarks/" limit={1}>
{d => {
return d.isLoading ? (
"Loading"
) : (
<ReactJson src={d} />
);
}}
</FirestoreCollection>
<FirestoreBatchedWrite>
{({ addMutationToBatch, commit }) => {
return (
<div>
{" "}
<h2>Batched write</h2>{" "}
<button
onClick={() => {
console.log("adding to batch");
addMutationToBatch({
path: `user_bookmarks/G_K_5onxu/`,
value: { [`a-value-${Date.now()}`]: Date.now() },
type: "update"
});
}}
>
Add to batch
</button>
<button
onClick={() => {
console.log("committing to batch");
commit().then(() => {
console.log("Committed");
});
}}
>
Commit batch
</button>
</div>
);
}}
</FirestoreBatchedWrite>
</div>
</FirestoreProvider>
);
};
