react-firestore-query-lab
v0.1.4
Published
<img src='https://github.com/gregfenton/react-firestore-query-lab/raw/master/media/icons/react.png' width='60'/><img src='https://github.com/gregfenton/react-firestore-query-lab/raw/master/media/icons/firestore.png' width='60'/><img src='https://github.co
Downloads
10
Maintainers
Readme
React Firestore Query Lab
Table of Contents
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:
npm install react-firestore-query-lab
- In a "page" of your React app, such as the top-level
<App>
, include this component:import ReactFirestoreQueryLab from "react-firestore-query-lab"
- In that same "page", add the component to your JSX:
function App() { return ( <Provider store={store}> <ReactReduxFirebaseProvider {...rrfProps}> <ReactFirestoreQueryLab /> <Todos /> </ReactReduxFirebaseProvider> </Provider> ) }
- Run your app:
npm start
Using the Component
Once loaded in your app, you can query your Firestore instance. The Component comprises 4 "zones":
- Example Queries - displays several example queries, each prefixed with a load button. Clicking the load button copies the query text into the Query Zone.
- Query Zone - a text area where you compose your JSON query string
- Run Query - a button that when clicked parses the Query Zone string and passes it to
firestore.get()
. - 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