Gatsby: Error: The result of this StaticQuery could not be fetched. This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues

[abrehamgezahegn]

Description

Am using two different useStaticQueriy hooks on one component. The queries fetch data from contentful.

Steps to reproduce

1. start a fresh gatsby project from the hello world starter.
2. install contentful source plugin
3. configure gatsby for the plugin with accessToken and spaceId from contentful
4. publish two separate dummy entries on contentful (could be a header and a content)
5. try to pull those entries using different queries(hooks) on the same components

This is the component

const ModelSection = () => {

    const items = useFirstSectionContents();
    const header = useFirstSectionHeader();

    return (

        <div className={styles["container"]}>

            <header>
                <h1> Our {header} </h1> 
            </header>
            <div className={styles["cardContainer"]}>
                    <CardWithIconTop 
                        iconFileName="Money" 
                        header={items[0].title} 
                        content={items[0].description}
                    />
                    <div className={styles["iconContainer"]}> 
                        <Icon iconFileName="Angle-double-right"/> 
                    </div>
                    <CardWithIconTop 
                        iconFileName="Book-open"
                        header={items[1].title} 
                        content={items[1].description}
                    />
                    <div className={styles["iconContainer"]}> 
                        <Icon iconFileName="Angle-double-right"/>
                     </div>
                    <CardWithIconTop 
                        iconFileName="Sending"
                        header={items[2].title} 
                        content={items[2].description}
                    />
            </div>
        </div>


        )
}

These are the custome hooks am using above

import {useStaticQuery,graphql} from "gatsby";


export const useFirstSectionContents = () => {  

    const data = useStaticQuery(graphql`
        query{
             allContentfulFirstSection{
                nodes{
                  title
                  description            
                }
            }
        } 
    `)

    return  data.allContentfulFirstSection.nodes;
}

export const useFirstSectionHeader = () => {
    const data = useStaticQuery(graphql`
        query{
            contentfulFirstSectionHeader{
            firstSectionHeaderText
          }
        }
    `)

    return data.contentfulFirstSectionHeader.firstSectionHeaderText;
}

Expected result

data should load sound and safe

Actual result

The result of this StaticQuery could not be fetched.

Environment

OS: Linux 5.0 Ubuntu 18.04.2 LTS (Bionic Beaver)
CPU: (2) x64 Pentium(R) Dual-Core CPU T4300 @ 2.10GHz
Shell: 4.4.19 - /bin/bash
Binaries:
Node: 10.16.3 - /usr/local/bin/node
Yarn: 1.16.0 - /usr/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Languages:
Python: 2.7.15+ - /usr/bin/python
Browsers:
Firefox: 68.0.2
npmPackages:
gatsby: ^2.13.73 => 2.13.73
gatsby-background-image: ^0.8.6 => 0.8.6
gatsby-image: ^2.2.15 => 2.2.15
gatsby-plugin-sharp: ^2.2.18 => 2.2.18
gatsby-source-contentful: ^2.1.30 => 2.1.30
gatsby-source-filesystem: ^2.1.18 => 2.1.18
gatsby-transformer-sharp: ^2.2.12 => 2.2.12

[jonniebigodes]

@abrehamgezahegn i think it might be related to this.

Can you try and split them into diferent files and report back?
In the meantime i'm going to create a reproduction based on your description.

[abrehamgezahegn]

The link is a twich link. :laughing: . I figured a way around it though. Thanks for reaching out.
If you are wondering I have combined the two queries into one.

[LekoArts]

You can only use one StaticQuery/Page query/useStaticQuery per file. Please split out the custom hooks into different files and try again.

[abrehamgezahegn]

That works. Thanks. Also the solution i mentions above works too.