Gatsby: StaticQuery with multiple queries and using React.Component

[drj8022]

Hey all, using Gatsby for a client project and really loving it so far! Thanks for all the hard work! I guess I'm a bit of a dullard, but the thing that I find tripping me up most often is figuring out syntax. Here's a little snippet that would have helped me out huge earlier.

import React from 'react'
import { graphql, StaticQuery } from 'gatsby'

class CoolThing extends React.Component {
  render () {
    console.log(this.props)
    return (
      <div>
        {this.props.site.siteMetadata.title}

        {/* conditionally render directories */}
        {this.props.directories.edges && (
          <ul>
            {this.props.directories.edges.map((directory) => {
              return <li key={directory.node.id}>{ directory.node.name }</li>
            })}
          </ul>
        )}
      </div>
    )
  }
}

export default () => (
  <StaticQuery
    query={graphql`
      query {
        site {
          siteMetadata {
            title
          }
        }
        allDirectory {
          edges {
            node {
              id
              name
            }
          }
        }
      }
    `}
    render={(data) => (
      <CoolThing site={data.site} directories={data.allDirectory} />
    )}
  />
)

[drj8022]

Maybe something like the code above could be added as another example here?
https://www.gatsbyjs.org/docs/static-query/

[jonniebigodes]

@drj8022 glad you're having a great experience with Gatsby. If you don't mind me saying it's not that you're a dullard, graphql and React and graphql and Gatsby was a little daunting at first with me as well. I had some issues and i still do. And regarding not your issue, but more of your sugestion, i want to say that probably it was something that was overlooked by the initial creator of the docs and subsequent contributors.
But nonetheless as the docs are a ever mutating "organism",being changed constantly by the members and other people willing to contribute, so with that in mind feel free to clone the repository make the change to the documentation and submit a pull request following the guidelines on the template and see what apparently seems a small change, but could help out other people like you. Sounds good? Hope to see your pull request in the near future. Thanks for using Gatsby and once again glad that you're having such a great experience with it 👍

[chriskief]

@drj8022 Thanks for this, just what I needed. +1 for adding it to the docs.

[thundernixon]

Fantastic, that was just what I needed at https://www.gatsbyjs.org/docs/static-query/#how-to-use-staticquery-in-components!

[thefonso]

Would be great if this example was actually added to the docs.

[jonniebigodes]

@thefonso go for it...as it looks like there's no a movimentation for this case, let it be you that make the pull request and expand the documentation to include this case. Read the how to contribute, make the change, submit a pull request and wait for it to merged.

[sa9designer]

Any ideas how to achieve the above without JSX Lambdas?

[jonniebigodes]

@sa9designer if i understand you question correctly you don't want to use a structure like the one mentioned in the issue description right? You can alternatively use the hook useStaticQuery, more on it here

[sa9designer]

@jonniebigodes yes that is correct, especially for the StaticQuery bit at the end as the ts-lint forbids me from using JSX Lambdas. Thanks for the above.

[scotNZ]

I'd just emphasise that it's crucial to explain the syntax and how its operating when the class is utilised. Based on the snippet above I can now see how to use a static query in a class construct but I really have no idea what is going on.

[tijoer]

+1 to get this into the docs. @jonniebigodes the hook does not work in class components. As I just started out with react and use classes everywhere it is kinda hard to switch to hooks and I am glad that I found this example. The Gatsby doc is a bit empty for class components.

[jonniebigodes]

@tijoer to the best of my knowledge, out the box, hooks are not intended to work with class components, not only the ones Gatsby uses, but hooks in general. There's some caveats to this off course, you can use some "tricks" and get away with it, but for now and if you'll allow me, keep focused on learning React and use class components as there's nothing wrong with them, they are here to stay and they should be used as needed. More even and this is my personal belief, is that by using classes you get some extra knowledge of how React and components work and more control of your components. When you feel more "comfortable" with React then start taking functional components out for a spin.

As for this:

The Gatsby doc is a bit empty for class components.

The Gatsby documentation like i said before it's mutating "organism", constantly evolving, either by changes made by the learning team or new contributors or even by current members.
With that, the way i see it is that as React evolves so does Gatsby and it's documentation and with the release of hooks it was something of great addition to the ecosystem, making components smaller, leaner and simpler to use and read. If i'm not mistaken @sidharthachatterjee was the mastermind behind the hook implementation and it took of from there. The documentation started to shift towards that.

The way i see it and i might be completely off base here and also based on the popularity of Gatsby, is that if the documentation didn't shift in the hooks direction, then the repo would be "flooded" with issues to add hook, add documentation on hooks and so on, to prevent that a push was made for that, keeping one side happy, but the other one, people like you that might be starting out with React, which depending on the learning tool you're using it, is teaching you React but with classes is left a bit on the outside. I still believe that this type of example should be added to the documentation, so that not only you, but other people that just started with React, when they search for something in the docs they see a familiar codebase.

[kMamani]

me sirve el código jajajaj ¿se permite comentarios español?