React Firestore Query Lab

Table of Contents

• The react-firestore-query-lab Component
• Getting Started
• Using the Component
• The Example App

The react-firestore-query-lab Component

This is a React component allowing you to experiment with react-redux-firebase queries. Well, actually, it uses redux-firestore's get().

Your react-redux-firebase app should be configured and running against Firestore. If not, configure that first.

This component can be included anywhere in your React app that a component can be added, assuming it is somewhere inside the hierarchy of the <ReactReduxFirebaseProvider>.

Getting Started

For the following steps, we assume you are going to add the component to <App> of the Firestore configuration:

1. npm install react-firestore-query-lab
2. In a "page" of your React app, such as the top-level <App>, include this component:
   • import ReactFirestoreQueryLab from "react-firestore-query-lab"
3. In that same "page", add the component to your JSX:

   function App() {
     return (
       <Provider store={store}>
         <ReactReduxFirebaseProvider {...rrfProps}>
    
           <ReactFirestoreQueryLab />
    
           <Todos />
         </ReactReduxFirebaseProvider>
       </Provider>
     )
   }

4. Run your app: npm start

Using the Component

Once loaded in your app, you can query your Firestore instance. The Component comprises 4 "zones":

1. Example Queries - displays several example queries, each prefixed with a load button. Clicking the load button copies the query text into the Query Zone.
2. Query Zone - a text area where you compose your JSON query string
3. Run Query - a button that when clicked parses the Query Zone string and passes it to firestore.get().
4. Results Zone - a text field where query results or error strings are displayed.

The query takes a string that is parsed as JSON. If it parses correctly and if it contains a valid query, firestore.get() is called with your query. Results or Errors are displayed in the Results Zone.

The Example App

See the project's example app to quickly get going in a sample app.

---

Table of contents generated with markdown-toc