Search code examples
reactjsgraphqlgatsby

Gatsby Graph-ql selection of subfields error


I'm tyring to make my own site using Gatsby. It's first time to use graph-ql, I made a query with graph-ql ide served by Gatsby for collect SiteMeatadata

  const data = useStaticQuery(graphql`
    query SiteInformationQuery {
      __typename
      site {
        siteMetadata {
          author {
            name
            summary
          }
          title
          description
        }
      }
    }
  `);

I predicted that it returns like

{
  "data": {
    "site": {
      "siteMetadata": {
        "title": "Gatsby Typewriter theme",
        "author": {
          "name": "dodok8",
          "summary" : "student"
        }
      }
    }
  }
}

But it made a error.

 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Field "author" of type "SiteSiteMetadataAuthor" must have a selection of subfields. Did you mean "author { ... }"?

File: src\components\seo.js:21:13

But I enviced all subfileds of author in query. What's wrong with my subfields and a query sentence?

It's raw data about siteMetadata stored in gatsby-config.js.

module.exports = {
  siteMetadata: {
    title: `Gatsby Typewriter theme`,
    description: `Demo page of Gatsby Typewriter theme`,
    author: {
      name: 'dodok8',
      summary: 'student',
    },
  },

Solution

  • Problem is not in the query I wrote, basic query in componets/seo.js. There is a query in line 13 if you don't edit this file,

        graphql`
          query {
            site {
              siteMetadata {
                title
                description
                author
              }
            }
          }
        `
      );
    

    In my case, I add subfield to author, so I should change it like

        graphql`
          query {
            site {
              siteMetadata {
                title
                description
                author {
                  name
                  summary
                }
              }
            }
          }
        `
      );