Gatsby: Can I have two StaticQueries in single component ?

[thidasapankaja]

Summary

I need to use 2 StaticQuery components in a single component. When I try to do this, it throws an error as error UNHANDLED REJECTION and exits. How can I fix this ?

Relevant information

I have a query to filter out skills based on its' type. This should be either design or dev .

allContentfulSkill(filter:{type:{eq:"design"}}){
                edges{
                  node{
                    skill
                    displayImage{
                      file{
                        url
                      }
                    }
                  }
                }
              }

But I couldn't figure out how to do it. So, when I write code like below, second query will not executes as it displays Loading (StaticQuery) . How can I work this out ? I know this is reusable scenario. But I can't figure it out.

<div className='Full-Content-Skills'>
      <div>
        <StaticQuery
          query={graphql`
            query DevSkillsQuery{
              allContentfulSkill(filter:{type:{eq:"dev"}}){
                edges{
                  node{
                    skill
                    displayImage{
                      file{
                        url
                      }
                    }
                  }
                }
              }
            }
          `}
          render={({ allContentfulSkill }) => (
            allContentfulSkill.edges.map((p, i) => (
                <SKill key={p.id} {...p} />
            ))
          )}
        /> 
      </div>
    <div className='Design'>
      <StaticQuery
          query={graphql`
            query DevSkillsQuery{
              allContentfulSkill(filter:{type:{eq:"design"}}){
                edges{
                  node{
                    skill
                    displayImage{
                      file{
                        url
                      }
                    }
                  }
                }
              }
            }
          `}
          render={({ allContentfulSkill }) => (
            allContentfulSkill.edges.map((p, i) => (
                <SKill key={p.id} {...p} />
            ))
          )}
        /> 
    </div>

Any help would be appreciated.

Thanks.

[lannonbr]

So there is a limit of one Static Query per file by how gatsby runs the queries. you could merge the two into a single query like such:

query={graphql`
  query {
    dev: allContentfulSkill(filter:{type:{eq:"dev"}}){
      # content for dev
    }
    design: allContentfulSkill(filter:{type:{eq:"design"}}){
      # content for design
    }
  }

Another way to solve this is to use the useStaticQuery hook and then have these queries in separate files and import them in. you can have as many useStaticQuery calls as you want in a file

[thidasapankaja]

@lannonbr , Tried the first approach. Getting an error saying TypeError: Cannot read property 'edges' of undefined

This comes from the render method

render={({ allContentfulSkill }) => (
            allContentfulSkill.edges.map((p, i) => (
                <SKill key={p.id} {...p} />
            ))
          )}

Will try 2nd approach.

Thanks anyway

[pieh]

@iampankaja when you use that first approach - data will be returned as:

{
  // this is "dev" not "allContentfulSkill" anymore
  dev: {
    edges: [...]
  },
  design: {
    edges: [...]
  }
}

so allContentfulSkill name is no longer used - this is why you can have 2 separate "queries" and access results of those independently

[thidasapankaja]

@pieh Thanks a lot. It worked