Is it possible to execute grapql from components itself rather than pages or layouts?

[LiangNex]

Hi Gatsby!

I learned Gatsby for a while and made several tests with plugins:

• gatsby-transformer-remark
• gatsby-transformer-json
• gatsby-transformer-custom-blocks

My purpose is to use custom blocks plugin in Markdown to implement a list component which includes data from local json files, hence i need to execute Graphql in components but not in pages nor layouts, is it possible?

Thx a lot

[m-allanson]

Hey @LiangNex, queries are restricted to pages and layouts for now. You may be able to use GraphQL fragments to achieve what you want? There's a discussion over at #2168

This proposed API for v2 might be of interest to you too: #3830 (comment)

[LiangNex]

@m-allanson Thank you for your response.
Let's say we have such a tag in Markdown, path: root/content/docs

<sample name='param1, param2, param3...'><sample/>

Here is a component, path: root/src/components/MarkdownPage

import React from 'react';
import RehypeReact from 'rehype-react';
import List from '../../pages/List';

const renderAst = new RehypeReact({
    createElement: React.createElement,
    components: {
        'sample': List,
    },
}).Compiler;

const MarkdownPage = ({ markdownRemark }) => {
    const post = markdownRemark;

    return (
        <div>
            <h1>{post.frontmatter.title}</h1>
            <div className='content'>
                {
                    renderAst(post.htmlAst)
                }
                <div> {post.frontmatter.path}</div>

                <div> {post.frontmatter.date}</div>
            </div>
        </div>
    )
};

export default MarkdownPage;

List, path: root/src/pages

import React from 'react';

class List extends React.Component{
    render () {
        const list = this.props.name.replace(/ /g, '');
        const str = list.split(',');
        
        const listItems = str.map((value) =>
            <li key={value}>
                <SampleDetails name={value}/>
            </li>
        );
        return(
            <div>
                <ul className={'panel'}>
                    {listItems}
                </ul>
            </div>
        )
    }
}
export default List;

const SampleDetails = ({data}) => {
    return(
        <div>
            {data.allSampleJson.edges.node.label}
        </div>
    )
}

Let's say we execute GraphQL in List.js.
The problem is that if I access localhost:8000/list, 'TypeError: this.props.name is undefined' throws out.
For localhost:8000/docs/sample(which is my purpose), 'TypeError: data is undefined' throws out.
I am afraid fragments can't help in this case, i will give it a shot later.

Another question, should this be done in gatsby-node.js via Gatsby APIs instead of quering after generating Markdowns?

[thekevinbrown]

Could you show us the full example with your GraphQL query in List.js?

It sounds likely to me that the query you're executing isn't passing data in the same shape as what you're expecting.

For example it wouldn't be data.allSampleJson.edges.node.label, as edges is an array of all the files that matched your query. If you're guaranteed to only have one result of that query, then you could use data.allSampleJson.edges[0].node.label.

Also in your query I like to alias so I can pick my names in the resulting data. For example you could do this:

query SampleDetailsQuery {
  sampleDetails: allSampleJson(filter: { id: { regex: "/content\\/sample-details\\.json/" } }) {
    edges {
      node {
        label
      }
    }
  }
}

Then you'd be able to access it at data.sampleDetails.edges[0].node.label. Does that help at all?

[LiangNex]

@blargity Thank you for your response.

Here is my query in List.js:

export const sampleQuery = graphql`
query sampleListQuery{
  allSampleJson{
    edges{
      node{
        label
        attributes {
          name
          type
          param_length
          required
          description
        }
      }
    }
  }
}
`;

I'd like to map the result with label which comes from <sample name="label1, label2, label3"></sample> of Markdown and display the relevant attributes. I tried your query example but i still got TypeError: data is undefined.

The problem to me, I guess, is that the query result is not inserted into the data prop of SampleDetails component while I access http://localhost:8000/docs/sample (which is converted from Markdown). Emmm, maybe this way is not allowed ?

BTW, I'd like to learn a little bit about below questions:

• When will Gatsby execute Graphql? Is it a one-time execution with all GraphQL statements?
• If no, can plugin 'gatsby-transformer-remark' execute GraphQL while converting Markdown to HTML?

Thx a lot

[thekevinbrown]

There's a known bug with Gatsby where sometimes it gets confused and needs the cache to be cleared. This usually manifests with the entire data prop not being supplied to a page. I would guess this is what you're experiencing. Try killing gatsby, deleting the .cache directory in your project, then starting it again.

If you're still getting the data prop not supplied then it's likely you will see other errors in the console. Another cause of this can be if your GraphQL queries don't parse (aren't valid), and you'd see that as a red error in the console.

I'm also not sure how deep you can go into the markdown nodes because I don't use the markdown layer of Gatsby, but you should certainly be able to query whatever you can in the GraphiQL interface on http://localhost:8000/___graphql from your pages.

On your questions:

1. There are a few steps. Gatsby does this at a high level:

• First step is to source the data from any data sources you've connected. The file system, wordpress, whatever.
• Next step is to transform this data. So for example if you have the remark transformer, it will notice that markdown files have been sourced, then transform them by adding additional data to all the nodes in memory.
• Finally, it will execute the queries against this data model it's built and give you the results.

So basically, it's a one time execution, but you can add more sources or transformers so you can get the data in the model that you need before the query is run.

2. That means that no, gatsby-transformer-remark is not executing GraphQL at all. All it's doing is waiting for markdown files to appear, then parsing them and putting the results of that into the data model. Something else could then kick up and do further processing, etc, and eventually after all of the sources and transformers are done, you query the resulting data.

Does that help at all?

[thekevinbrown]

Also I noticed that the URL you're trying to hit is /docs/sample. That would mean that you'd have pages/docs/sample.js or pages/docs/sample/index.js, not pages/list.js like you've said. That could be another contributing factor.

[LiangNex]

@blargity Thanks a lot for your explanation, it saves my time. 👍