All Projects → jlengstorf → Gatsby With Unstructured Data

jlengstorf / Gatsby With Unstructured Data

Licence: mit
A simple example of creating pages dynamically in Gatsby without using GraphQL.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Gatsby With Unstructured Data

Gatsby Starter Blog Grommet
A Gatsby v2 starter based on Grommet v2 UI. Demo:
Stars: ✭ 21 (-74.7%)
Mutual labels:  gatsby, gatsbyjs, demo
Gatsby Remark Embed Gist
Gatsby remark gists preprocessor
Stars: ✭ 30 (-63.86%)
Mutual labels:  gatsby, gatsbyjs
Blog
My blog created with React, Gatsby & Markdown
Stars: ✭ 29 (-65.06%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Advanced Starter
A high performance skeleton starter for GatsbyJS that focuses on SEO/Social features/development environment.
Stars: ✭ 1,224 (+1374.7%)
Mutual labels:  gatsby, gatsbyjs
Awesome Gatsby
⚛️ 📄 🚀 Awesome list for the mighty Gatsby.js, a blazing fast React static site generator.
Stars: ✭ 928 (+1018.07%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Plugin Meta Redirect
Write Gatsby redirects to html files with a meta refresh
Stars: ✭ 18 (-78.31%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Starter Spectral
Gatsby.js V2 starter template based on Spectral by HTML5 UP
Stars: ✭ 34 (-59.04%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Starter Ghost
A starter template to build lightning fast websites with Ghost & Gatsby
Stars: ✭ 752 (+806.02%)
Mutual labels:  gatsby, gatsbyjs
Dantecalderon.dev
💻 ❤️ My personal website
Stars: ✭ 51 (-38.55%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Themes
Get high-quality and customizable Gatsby themes to quickly bootstrap your website! Choose from many professionally created and impressive designs with a wide variety of features and customization options.
Stars: ✭ 1,208 (+1355.42%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Starter Portfolio Cara
Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.
Stars: ✭ 1,101 (+1226.51%)
Mutual labels:  gatsby, gatsbyjs
Bonneville
A simple, clean GatsbyJS starter for those looking to get up and running with Gatsby
Stars: ✭ 23 (-72.29%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Simplefolio
⚡️ A minimal Gatsby portfolio template for Developers
Stars: ✭ 895 (+978.31%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Ghost Balsa Starter
A Gatsby starter for creating blogs from headless Ghost CMS.
Stars: ✭ 17 (-79.52%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Starter Prismic I18n
Based on gatsby-starter-prismic with Internationalization (i18n) support
Stars: ✭ 77 (-7.23%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Starter 2column Portfolio
A minimalistic portfolio with a 2 column layout made for GatsbyJS.
Stars: ✭ 33 (-60.24%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Starter Deck
🗣 Create presentations using Gatsby, React & Markdown.
Stars: ✭ 522 (+528.92%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Starter Minimal Blog
Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.
Stars: ✭ 752 (+806.02%)
Mutual labels:  gatsby, gatsbyjs
Jamtemplates.com
Curated collection of free Gatsby themes.
Stars: ✭ 47 (-43.37%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Material Ui Business Starter
Beautiful Gatsby Material UI Business Starter
Stars: ✭ 62 (-25.3%)
Mutual labels:  gatsby, gatsbyjs

Can you use Gatsby without GraphQL?

Yes!

This is a small example that loads data from the PokéAPI’s REST endpoints, then creates pages (and nested pages) using Gatsby’s createPages API.

What are the trade-offs?

The upsides of using REST:

  • The approach is familiar and comfortable, especially if you’re new to GraphQL
  • There’s no intermediate step: you fetch some data, then build pages with it

The downsides of using REST:

  • There are lots of calls required, and each nested call relies on data from the previous call; this won’t scale well
  • All of the data for the page needs to be explicitly passed into the context object, which makes it a little harder to understand what data is being passed to the page component
  • The relationships between items are harder to understand; we need to make three separate requests, resulting in three separate data objects that we have to manually combine in the front-end

What would this look like querying from a GraphQL API?

Great question! There’s not a stable Pokémon GraphQL API that I’ve seen, but if there was, the query might look like this:

const data = await graphql(`
  {
    Pokemon {
      edges {
        node {
          name
          abilities {
            name
            effect
          }
        }
      }
    }
  }
`);

// Use createPage to turn the data into pages, just like the REST version.

This one query accomplishes the same thing as the three different REST calls, and it shows more clearly how the data is related (e.g. each Pokémon has abilities).

What would this look like using Gatsby's GraphQL integration layer?

For quick and easy comparison, the using-gatsby-data-layer branch illustrates how you can accomplish this using Gatsby's integration layer, rather than using the unstructured data approach.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].