Need help with converting query for all products into React code

🆘 Support
1

I’m a little new to GraphQL and React - I’m trying to convert a query I’ve created in DatoCMS to retrieve all 6 six products in my catalog, into something I can consume within a React component.

My query looks like this:

    query AllProductsQuery {
      allCupcakes {
        stockId
        name
        description
        price
        productImage {
          blurUpThumb
          responsiveImage(imgixParams: {fm: jpg, fit: crop, w: 600, h: 600}, sizes: "(max-width: 600px) 100vw, 600px") {
            srcSet             
            webpSrcSet         
            sizes              
            src                
          }      
        }
      }
    }

This works fine in DatoCMS, and retrieves the following data (first entry shown here; the rest are very similar):

    {
      "data": {
        "allCupcakes": [
          {
            "name": "Fairy cupcake (x3)",
            "description": "Traditional fairy cupcake",
            "price": 2.95,
            "productImage": {
              "blurUpThumb": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoOEggQCA0NDRgIDQYGDBEJDQ0YFx8ZGCIVFiEaHysjGh0oHSEWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHC8lIigvLy81Oy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABAAGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAABQECB//EABoQAAMAAwEAAAAAAAAAAAAAAAABAgMEQTH/xAAVAQEBAAAAAAAAAAAAAAAAAAADBP/EABgRAQEBAQEAAAAAAAAAAAAAAAECABED/9oADAMBAAIRAxEAPwDS7yJ9CMiQnvec9KxvOn6Tvo5STN8tKwFj22kSLNKY2Tu//9k=",
              "responsiveImage": {
                "srcSet": "https://www.datocms-assets.com/29216/1590939937-fairycupake.jpg?dpr=0.25&fit=crop&fm=jpg&h=600&w=600 150w,https://www.datocms-assets.com/29216/1590939937-fairycupake.jpg?dpr=0.5&fit=crop&fm=jpg&h=600&w=600 300w,https://www.datocms-assets.com/29216/1590939937-fairycupake.jpg?dpr=0.75&fit=crop&fm=jpg&h=600&w=600 450w,https://www.datocms-assets.com/29216/1590939937-fairycupake.jpg?fit=crop&fm=jpg&h=600&w=600 600w",
                "webpSrcSet": "https://www.datocms-assets.com/29216/1590939937-fairycupake.jpg?dpr=0.25&fit=crop&fm=webp&h=600&w=600 150w,https://www.datocms-assets.com/29216/1590939937-fairycupake.jpg?dpr=0.5&fit=crop&fm=webp&h=600&w=600 300w,https://www.datocms-assets.com/29216/1590939937-fairycupake.jpg?dpr=0.75&fit=crop&fm=webp&h=600&w=600 450w,https://www.datocms-assets.com/29216/1590939937-fairycupake.jpg?fit=crop&fm=webp&h=600&w=600 600w",
                "sizes": "(max-width: 600px) 100vw, 600px",
                "src": "https://www.datocms-assets.com/29216/1590939937-fairycupake.jpg?fit=crop&fm=jpg&h=600&w=600"
              }
            }
          },
...

I’ve converted it into the following Gatsby/React component/code so far (the code is a little basic - it’s more about consuming data, than how it looks!):

import React from "react"
import Layout from "../components/layout"
import { graphql } from "gatsby"
import { Image } from "react-datocms";

import SiteNavigation from "../components/sitenavigation"

const GalleryPage = ({ data }) => (
  <>
    <Layout>
      <SiteNavigation />
      <div style={{ color: `teal` }}>
        <h1>Product Gallery</h1>
        <p>Such wow. Very React.</p>
        <p />
        <ul>

        </ul>
        <!--This works, but always returns last entry -->
        <p>Cake name: {data.datoCmsCupcake.name}</p>
        <p>StockID: {data.datoCmsCupcake.stockId}</p>
        <p>Price : {data.datoCmsCupcake.price}</p>

        <!--This isn't working-->
        <Image data={data.datoCmsCupcake.productImage.responsiveImage} />
      </div>
    </Layout>  
  </>
)

export default GalleryPage

export const allProductsQuery = graphql`
  query AllProductsQuery {
    datoCmsCupcake {
      stockId
      name
      description
      price
      productImage {
        responsiveImage(
          imgixParams: {fm: jpg, fit: crop, w: 600, h: 600}, sizes: "(max-width: 600px) 100vw, 600px"
        ) {
          srcSet             
          webpSrcSet         
          sizes              
          src                
        }      
      }
    }
  }
`

The error I’m getting is this:

  38:9  error  Cannot query field "responsiveImage" on type "DatoCmsFileField"  graphql/template-strings

✖ 1 problem (1 error, 0 warnings)

I’m sure I’m missing something - having looked and tried various different combinations of JSON keys, with no success. Can anyone help point me in the right direction please?

2

hi @alex.libby welcome! :wink:

As you might have already noticed, Gatsby GraphQL language is a little different from the one you can generate in our API Explorer.

So, in Gatsby you should not use responsiveImage, but fluid or fixed instead. Please that a look here.

Moreover, you can create a demo gatsby portfolio from here and take a look at the source code!

Hope this helps :slight_smile:

3

Hi @fabrizio

Thankyou for your help - this worked! I had to do a little more digging to get the right code, but I’ve been able to work out exactly what I needed. I have to admit that some of the docs don’t always make it very clear as to how to do some tasks (such as querying for a list of all items), so had to really look at the code example to get all I needed. Are you open to feedback around how I think the docs could be improved?

4

Hi @alex.libby

I’m glad that it helped

Are you open to feedback around how I think the docs could be improved?

Sure! Feedback is always welcome :slight_smile: Please open another topic here in community, so we can close this and continue the discussion there :wink: