Using JSON as a GraphQL data source in Gatsby

To get JSON data through Gatsby's GraphQL service, use the "gatsby-transformer-json" plugin.

Install by running "npm install gatsby-transformer-json --save" then adding the name of the plugin in the gatsby-config.js file: 

plugins: [
    `gatsby-transformer-json`,
]

The plugin will find JSON files and add them as a GraphQL source derived from the name of the JSON file. (The file may need to be in a certain place - it's only working for me in the images directory.) Here's an example with a file test-data.json 

[
    {"name" : "Larry"},
    {"name" : "Fred"},
    {"name" : "Joe"}
]

It will have two data sources: testDataJson and allTestDataJson. Here's a query with each and the result: 

query MyQuery {
  testDataJson {
    name
  }
}

{
  "data": {
    "testDataJson": {
      "name": "Larry"
    }
  }
}



query MyQuery {
  allTestDataJson {
    edges {
      node {
        name
      }
    }
  }
}


{
  "data": {
    "allTestDataJson": {
      "edges": [
        {
          "node": {
            "name": "Larry"
          }
        },
        {
          "node": {
            "name": "Fred"
          }
        },
        {
          "node": {
            "name": "Joe"
          }
        }
      ]
    }
  }
}

Popular posts from this blog

Serve create-react-app from a subdirectory

If you've tried to deploy create-react-app to a non-root subdirectory (i.e. example.com/app/), then you'll need the following to make it work: Set the homepage in project.json "homepage": "https://example.com/app/" If you are using Router: Set the basename attribute:  <Router basename={'/app'}> Set Route path prefixes <Route path={`${process.env.PUBLIC_URL}/dashboard`} component={Dashboard} /> Update Link tags <Link to={`${process.env.PUBLIC_URL}/dashboard`}> Sources: https://medium.com/@svinkle/how-to-deploy-a-react-app-to-a-subdirectory-f694d46427c1 https://stackoverflow.com/questions/49429906 https://create-react-app.dev/docs/deployment https://medium.com/@wolovim/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af
Read more

Google sign-in with pwa_auth

Do you need one of those universal sign in buttons Google / Facebook / Microsoft ? Take a took a look at pwa-auth , a JavaScript tool to handle the login process for Microsoft, Google and Facebook accounts. We started with npx create-react-app  and changed App.js as follows: This only implements the Google sign-in and nothing for the back-end verification, but it's a start. Also, see this article on Medium.com
Read more

Components in React: "class" and "functional"

If you're creating a non-trivial webpage it might feel like it's getting out of hand.  Changes coming in from different places. CSS files. JavaScript files. HTML files. One "thing" on your page might have code coming from seven different files. This can be confusing, not to mention it and makes reusability and testing difficult. React addresses this complexity. It lets you make up your own tags for your specific use case. Not only that, but you can include everything the tag needs to make it work in one place. It's like a layer on top of JavaScript / HTML / CSS that lets you build your own reusable, modular, domain-specific components. And that's a central React idea: components . These components are like your own reusable HTML tags that also encapsulate whatever JavaScript (and HTML, and CSS, and other components, etc) they need to run. There are two main ways to create components in React: class and functional . Class Components The component method ...
Read more