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"
}
}
]
}
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
}
}
}
}
}
It should compile fine and work
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.
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
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
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
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: