3

I am pretty new to using Contentful and their Reference (many) field type. I have one reference type that pulls in many product names. in GraphQL I can see all my product name displaying, but when I try and render it on Gatsby I am not seeing anything display (productName:array). Here is my GraphQL

{
  allContentfulAppetizerMenuSection {
      nodes {
        menuItemReferences {
          productName
        }
      }
  }
}

and here is my code...

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

const Products = () => (

  <StaticQuery
  query={graphql`
    query MyQuery {
        allContentfulAppetizerMenuSection {
            nodes {
              menuItemReferences {
                productName
              }
            }
        }
    }
  `}

  render={data => (
    <div>
        {data.allContentfulAppetizerMenuSection.nodes.map(({ menuItemReferences }, i) => (
        <div key={i}>
            {menuItemReferences.productName}
        </div>
      ))}
    </div>
    )}
  />
)
  
export default Products;

Any help will be much appreciated.

SteveKim72
  • 31
  • 6
  • check data .... `render={data => { console.log(data); return "data test"; }}` or json stringify – xadm Oct 22 '20 at 20:51
  • @xadm I checked data, not exactly sure what I am looking for. Also, isn't json stringify for rich text fields? please forgive my lack of knowledge on this subject...thanks – SteveKim72 Oct 22 '20 at 21:42
  • this is for checking data exists and how structured ... `menuItemReferences` is not an array? ... show sample data? ... `.map` gives/vorks over `nodes` elements, already being `menuItemReferences`, no desctructuring needed ... `data.allContentfulAppetizerMenuSection.nodes.map(( menuItem, i) => { console.log(menuItem); return (
    {menuItem.productName}
    ...`     – xadm Oct 23 '20 at 06:33
  • @xadm thanks for the info I performed the check and similar to my graphQL query the 5 product name displayed as an array under menuItemReferences like this. `{allContentfulAppetizerMenuSection: {…}} allContentfulAppetizerMenuSection: nodes: Array(1) 0: menuItemReferences: Array(5) 0: {productName: "Baby Clams"} 1: {productName: "Baked Eggplant"} 2: {productName: "Fish Taco Bites"} 3: {productName: "Hot Crab Dip"} 4: {productName: "Jumbo Buffalo Shrimp"} length: 5 __proto__: Array(0) __proto__: Object length: 1 __proto__: Array(0) __proto__: Object __proto__: Object` – SteveKim72 Oct 23 '20 at 18:46
  • @xadm and I also tried the code sample you provided but I get a "cannot read property node of undefined" error. – SteveKim72 Oct 23 '20 at 18:49
  • because ... if `menuItemReferences` is an array then it has not a `productName` property ... use next `map()` – xadm Oct 23 '20 at 19:36
  • @xadm how would you do that? I tried couple of different methods based on some research but honestly, I just don't seem to be getting it done correctly. – SteveKim72 Oct 23 '20 at 20:54
  • if `data.allContentfulAppetizerMenuSection.nodes.map(( menuItem, i) => { console.log(menuItem);` works then add next level ... test ... `data.allContentfulAppetizerMenuSection.nodes.map(( menuItem, i) => { console.log(menuItem); menuItem.map(( item, j) => { console.log(item); ` – xadm Oct 23 '20 at 21:00
  • @xadm so here is the new code I added `{data.allContentfulAppetizerMenuSection.nodes.map((menuItem, i) => { console.log(menuItem); menuItem.map(( item, j) => { console.log(item); return (
    {item.productName}
    ) }) })}` but I am getting an error "TypeError: menuItem.map is not a function"     – SteveKim72 Oct 23 '20 at 21:28
  • check if it is an array before using map? ... this discussion deosn't make sense if you don't know how to list nested objects/arrays, create editable [example] on codesandbox with hardcoded data structure equal to logged out, play with it using react or not, it's general js knowledge – xadm Oct 24 '20 at 09:10
  • @xadm great suggestion...thanks for the advice and help. – SteveKim72 Oct 24 '20 at 16:23

1 Answers1

0

Try:

const Products = () => {
  const data = useStaticQuery(graphql`
      query {
          allContentfulAppetizerMenuSection {
              nodes {
                  menuItemReferences {
                      productName
                  }
              }
          }
      }
  `);

  return <div>
    {data.allContentfulAppetizerMenuSection.nodes.map(({ menuItemReferences }, i) => {
      return <div key={i}>
        {menuItemReferences.productName}
      </div>;
    })}
  </div>;
};

export default Products;

Note the usage of useStaticQuery hook and the return statement in your loop.

The refactor upon useStaticQuery results in a cleaner and reusable code but the idea it's exactly the same, if you are more familiar with the old StaticQuery, you can keep it.

If the error persists, try to debug inside the loop.

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • thanks for the response. I tried the code sample you provided but I am getting a blank screen with empty divs. For whatever reason the Contentful Reference(many)(menuItemReferennces) field is not pulling the data from the array to display the product names. – SteveKim72 Oct 23 '20 at 18:53
  • Is your `data` object filled? – Ferran Buireu Oct 23 '20 at 19:16
  • Excuse my lack of knowledge when it comes to working with Gatsby and Contentful. but do you mean do i have the product names inputed into a field on Contentful? Yes! but if that is not what you are asking could you provide maybe an example of what you mean? – SteveKim72 Oct 23 '20 at 19:36