Using static query with data from a plugin in component in Gatsby

Question

I'm new to React and Gatsby. I'm trying to get data from a gatsby csv plugin in a component. I read that in components you have to use static query to get data but I can't make it works. I received "Cannot read property 'props' of undefined", so I think that I'm doing something wrong with the data constructor or maybe the syntax is wrong.

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

const data = this.props.data.allLettersCsv.edges

export default () => (
  <StaticQuery
    query={graphql`
      query Corrispondences {
        allLettersCsv {
          edges {
            node {
              word
              value
            }
          }
        }
      }
    `}
    render={data.map((row,i) => (
        <div>
        <table>
          <thead>
            <tr>
              <th>Letter</th>
              <th>ASCII Value</th>
            </tr>
          </thead>
          <tbody>
              <tr key={`${row.node.value} ${i}`}>
                <td>{row.node.word}</td>
                <td>{row.node.value}</td>
              </tr>
          </tbody>
        </table>
      </div>
      ))
    }
  />
)

Derek Nguyen · Accepted Answer · 2019-02-06 17:43:37Z

1

There are 2 problems in your code:

First, you are declaring data outside of component:

const data = this.props.data.allLettersCsv.edges

There is probably no this.props in the module scope, hence the error you get. You should remove this line, since gatsby provides graphql query results to your component via StaticQuery’s render.

Second, StaticQuery's render expect a function, where it passes the results from your graphql query as data (Checkout React's docs on render props).

So you could re-write it like this for example:

render={data => (
  <>
    {data.allLettersCsv.edges.map((row,i) => ...)}
  </>
)

Hope it helps!

answered Feb 6, 2019 at 17:43

Derek Nguyen

11.5k1 gold badge44 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using static query with data from a plugin in component in Gatsby

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related