gatsby-transformer-json Not parsing single objects

Created on 1 Jul 2018  Â·  3Comments  Â·  Source: gatsbyjs/gatsby

Description

I'm using Netlify CMS to save a list of data (testimonials example) https://www.netlifycms.org/docs/widgets/#list . The output of this when saved is in the format of

{
  "testimonials": [
    {
      "testament": {
        "name": "Jessica Parke",
        "company": "WallSteet",
        "quote": "These people are amazing"
      }
    }
  ]
}

Steps to reproduce

Simply add the below format to any JSON file:

{
  "testimonials": [
    {
      "testament": {
        "name": "Jessica Parke",
        "company": "WallSteet",
        "quote": "These people are amazing"
      }
    }
  ]
}

lets call this file testing.json. In any page, inside the graphql query run the following (as per the docs)

allTestimonialsJson {
      edges {
        node {
          testimonials {
            testament {
              name
              company
              quote
            }
          }
        }
      }
    }

Expected result

It should compile fine and work

Actual result

We end up with an error that just crashes on compiling

GraphQL Error Unknown fieldallTestimonialsJsonon typeRootQueryType``

Note that the plugin works fine when i'm working with a similar format, but only when its in an array state, i.e:

[
  {
      "testament": {
        "name": "Jessica Parke",
        "company": "WallSteet",
        "quote": "These people are amazing"
      }
    }
]

The issue however persists even when we have a single object in the JSON file, the plugin, from my brief experience with it, isn't a fan of the parent data structure being an object as to an array.

i.e

{ "bob": "marley"}

doesn't work, however

[{"bob": "marley"}] works.

Environment

System:
OS: macOS High Sierra 10.13.3
CPU: x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.11.1 - /usr/local/bin/node
npm: 5.6.0 - /usr/local/bin/npm
Browsers:
Chrome: 67.0.3396.99
Safari: 11.0.3
npmPackages:
gatsby: ^1.9.241 => 1.9.260
gatsby-cli: ^1.1.58 => 1.1.58
gatsby-image: ^1.0.51 => 1.0.53
gatsby-link: ^1.6.45 => 1.6.45
gatsby-plugin-favicon: ^2.1.1 => 2.1.1
gatsby-plugin-google-analytics: ^1.0.31 => 1.0.31
gatsby-plugin-netlify-cms: ^2.0.1 => 2.0.1
gatsby-plugin-react-helmet: ^2.0.8 => 2.0.11
gatsby-plugin-sharp: ^1.6.46 => 1.6.47
gatsby-source-filesystem: ^1.5.38 => 1.5.38
gatsby-transformer-json: ^1.0.20 => 1.0.20
gatsby-transformer-sharp: ^1.6.26 => 1.6.26
npmGlobalPackages:
gatsby-cli: 1.1.58

File contents (if changed)

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: 'Demo project',
  },
  plugins: [
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    'gatsby-plugin-react-helmet',
    `gatsby-transformer-json`,
    `gatsby-plugin-netlify-cms`,
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/images/`,
        name: 'images'
      }
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/data/`,
        name: 'data'
      }
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "UA-1123444-1243",
        // Puts tracking script in the head instead of the body
        head: false,
        // Setting this parameter is optional
        anonymize: true,
        // Setting this parameter is also optional
        respectDNT: true,
        // Avoids sending pageview hits from custom paths
        exclude: ["/preview/**", "/do-not-track/me/too/"],
      },
    },
    {
      resolve: `gatsby-plugin-favicon`,
      options: {
        logo: "./src/assets/test-logo.png",
        injectHTML: true,
        icons: {
          android: true,
          appleIcon: true,
          appleStartup: true,
          coast: false,
          favicons: true,
          firefox: true,
          twitter: false,
          yandex: false,
          windows: false
        }
      }
    }
  ],
}

package.json: N/A
gatsby-node.js:

 if (process.env.NODE_ENV === 'production') {
    exports.modifyBabelrc = ({ babelrc }) => ({
      ...babelrc,
      plugins: babelrc.plugins.concat(['transform-regenerator']),
    })
 }

gatsby-browser.js:

exports.onRouteUpdate = () => {
  if (typeof window !== `undefined`) {
    window.scrollTo(0, 0);
  }
}

exports.shouldUpdateScroll = args => {
   return true;
};

gatsby-ssr.js: N/A

question or discussion

Most helpful comment

@pieh is correct. Single objects get their node type from the parent directory. To make your query work, you could structure your data like so:

data/
  testimonials/
    testing.json

All 3 comments

Hmm, did you check docs how json transformer handles single objects? (it doesn't generate name from file name - it does from directory name)

@pieh is correct. Single objects get their node type from the parent directory. To make your query work, you could structure your data like so:

data/
  testimonials/
    testing.json

Right! That makes a lot more sense! Thanks for this :) @pieh @rbeach

Was this page helpful?
0 / 5 - 0 ratings