Gatsby Firebase Source
Quick and dirty firebase source for Gatsby. Allows you to query your firebase data right into your statically generated pages with Gatsby.
Usage
-
First you need a Private Key from firebase for priviledged enviornments, find out how to get it here: https://firebase.google.com/docs/admin/setup (or click the settings gear > Service accounts tab > Generate New Private Key button at the bottom)
-
Place that private key .json file somewhere in your gatsby project (the root is fine).
-
Configure gatsby-config.js
// the plugin options are: credential databaseURL types: type path query map // Here's an example: moduleexports = // the rest of your config plugins: resolve: `gatsby-source-firebase` options: // point to the firebase private key downloaded credential: // your firebase database root url databaseURL: "https://reactjs-training.firebaseio.com" // you can have multiple "types" that point to different paths types: // this type will become `allWorkshop` in graphql type: "Workshop" // the path to get the records from path: "v2/data/workshops" // probably don't want your entire database, use the query option // to limit however you'd like ref // This allows you to map your data to data that GraphQL likes: // 1. Turn your lists into actual arrays // 2. Fix keys that GraphQL hates. It doesn't allow number keys // like "0", you'll get this error pretty often: // Error: Names must match /^[_a-zA-Z][_a-zA-Z0-9]*$/ but "0" does not // 3. Remove stuff you don't need. // // Feel free to mutate, we sent you a copy anyway. { // fix keys graphql hates nodenineteenEightyFive = node'1985' delete node'1985' // convert a child list to an array: return nodesessions = Object // finally, return the node return node } // if you're data is really simple, this should be fine too type: "CourseDescriptions" path: "text/courseDescriptions"
Enjoy!