When beer ratings are null

[wilsonusman]

My beers api response had an empty beer record, so I was getting this error:

TypeError: Cannot read property 'average' of null

With the code below.

<BeerGridStyles>
        {data.beers.nodes.map((beer) => {
          const rating = Math.round(beer.rating.average);

          return (
            <SingleBeerStyles key={beer.id}>
              <img src={beer.image} alt={beer.name} />
              <h3>{beer.name}</h3>
              {beer.price}
              <p title={`${rating} out of 5 stars`}>
                {`⭐`.repeat(rating)}
                <span style={{ filter: `grayscale(100%)` }}>
                  {`⭐`.repeat(5 - rating)}
                </span>
                <span>({beer.rating.reviews})</span>
              </p>
            </SingleBeerStyles>
          );
        })}
</BeerGridStyles>

I ended just replacing two line in the code, with the conditional code below. Not sure if this is the best solution, but it worked.

const rating = Math.round(beer.rating ? beer.rating.average : 0)

<span>({beer.rating ? beer.rating.reviews : 0})</span>

[dave52]

Ran into this issue too... looks like the beer API has a couple of blank entries at the end, scroll to the bottom you'll see the 'beers' with just an 'id' and no additional data:
https://api.sampleapis.com/beers/ale

Guessing the API changed after Wes released the course.

I ended up doing something similar, just skipping generation of a 'beer' into a node, in gatsby-node.js to avoid potential blank entries on the beers page...

...
for (const beer of beers) {

    // added line
    if (!beer.name) return;
    
    const nodeMeta = {
      id: createNodeId(`beer-${beer.name}`),
      parent: null,
      children: [],
      internal: {
        type: 'Beer',
        mediaType: 'application/json',
        contentDigest: createContentDigest(beer),
      },
    };
    actions.createNode({
      ...beer,
      ...nodeMeta,
    });
}
...

[dave52]

Wound up submitting an issue for the API maintainers:
jermbo/SampleAPIs#123

Happy coding

[dave52]

jermbo/SampleAPIs#123

Looks like API endpoint was fixed and deployed, should be okay to close :)

[joelleclerc]

Confirming this is still an issue (or there is a new similar issue) as of today, but either workaround mentioned above will let you proceed with the tutorial!

I tried to inspect the JSON output here: https://sampleapis.com/api-list/beers
and the endpoint link: https://api.sampleapis.com/beers/ale

There seems to be a bunch of rogue data with email addresses and other junk starting at object id: 181 that get converted into null. I will try to reach out to the maintainer to see if they can look into it. It didn't seem like something I'd be able to solve with a pull request.

Bad luck that every other API on the website seems to be working fine, and it's just the Beer API filtered for Ales.

[Asjas]

For anyone who comes across this in the future, here is a link to the current solution 🙂

#132 (comment)