Multiple queries in a component for Gatsby

Question

I'm using Gatsby to createPages and then in the createPage method I'm referencing a specific component for the page

createPage({
  path: node.path.alias,
  component: path.resolve(`./src/layouts/custom-page/custom-page.js`),
  context: {
    articleId: node.id,
    authorId: node.relationships.field_author.id
  },
})

Within the layout ( custom-page.js ) I'm trying to do 2 queries but it's not working for me. When I test this query in GraphiQL it works fine.

export const query = graphql `
    query ($articleId: String!, $authorId: String!) {
      article: nodeArticle(id: {eq: $articleId}) {
        title
        body {
          value
        }
        path {
          alias
        }
      }    
      author: nodePerson(id: {eq: $authorId}) {
        title       
        path {
          alias
        }
      }      
    }
`;

Within my component I would then expect to be able to access the data with either data.author.title or data.article.title .

Is it possible to do this in Gatsby?

Answer 1

Your query is seemed to be bit wrong or some missing in the query.

Query should look like.

export const query = graphql `
    query Articles($articleId: String!, $authorId: String!) {
      article: nodeArticle(id: {eq: $articleId}) {
        title
        body {
          value
        }
        path {
          alias
        }
      }    
      author: nodePerson(id: {eq: $authorId}) {
        title       
        path {
          alias
        }
      }      
    }
`;

Better to use the package graphql-tag .

Your query will look like.

import gql from 'graphql-tag';

export const query = gql`
    query Articles($articleId: String!, $authorId: String!) {
      article: nodeArticle(id: {eq: $articleId}) {
        title
        body {
          value
        }
        path {
          alias
        }
      }    
      author: nodePerson(id: {eq: $authorId}) {
        title       
        path {
          alias
        }
      }      
    }
`;

Answer 2

I'm using Gatsby to createPages and then in the createPage method I'm referencing a specific component for the page

createPage({
  path: node.path.alias,
  component: path.resolve(`./src/layouts/custom-page/custom-page.js`),
  context: {
    articleId: node.id,
    authorId: node.relationships.field_author.id
  },
})

Within the layout ( custom-page.js ) I'm trying to do 2 queries but it's not working for me. When I test this query in GraphiQL it works fine.

export const query = graphql `
    query ($articleId: String!, $authorId: String!) {
      article: nodeArticle(id: {eq: $articleId}) {
        title
        body {
          value
        }
        path {
          alias
        }
      }    
      author: nodePerson(id: {eq: $authorId}) {
        title       
        path {
          alias
        }
      }      
    }
`;

Within my component I would then expect to be able to access the data with either data.author.title or data.article.title .

Is it possible to do this in Gatsby?