Recipe site in Gatsby and Firebase-3

Welcome to part-3 of the series. You can find part-2 here.

Now, we will use the graphql in our code. But first let’s remove all the boiler-plate code from our gatsby default starter.

So, open the index.js file inside the pages folder and update it as below. Notice that we are using the graphql query from the previous part here.

Image for post
Image for post
index.js

Rest of the chapter is exclusive content and will be in my upcoming book Gatsby Cookbook. You can find more details about it here.

Image for post
Image for post
Gatsby Cookbook

Now, both of our pages will be shown once we click on the respective Comment link. Also notice that each will get a different /recipe/id

Image for post
Image for post
Page 1
Image for post
Image for post
Page 2

This completes part-3 of the series. You can find part-4 here.

You can find the code for the same in this github repo.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store