Using Gatsby Image with Gatsby Source Stripe

[ammonialime]

Hi,

Thanks for creating this. It's extremely helpful.

I'm having an issue using the plugin with Gatsby Image.

I've changed downloadFiles to true, but when building the query for products in GraphiQL I'm unable to see a local files field mentioned in the read me. My query looks as follows.

query MyQuery {
  allStripePrice {
    edges {
      node {
        active
        product {
          id
          images
        }
      }
    }
  }
}

Is there a way to use the plugin alongside Gatsby Image to optimize the images attached to each product? I've attached an image of what GraphiQL is giving me as options.

Thanks,

Jon

[njosefbeck]

Hello!

So at the moment the plugin doesn't support getting the optimized image in nested products (like in your example where the Product is nested inside of Price). As a workaround though, you can query for all products, which will include references to the optimized images on the localFiles key and then in JavaScript match up the product by id with the price. Not ideal, but that's the best I've got at this time!

If someone wants to attempt to add this functionality, please create a PR. I don't have the time to do it myself in the foreseeable future, but would happy to review anything someone comes up with. And if you need help crafting a query / solution based on what I describe above, let me know! Thanks!

[ammonialime]

Hey @njosefbeck

Thanks for getting back to me on this. Much appreciated.

I'm looking at my options in GraphiQL and I don't see a way to query for products without being nested in AllStripePrice. I've attached an image of my GraphiQL below. I assume I'm missing something... Can you give me an idea as to what the query would look like?

[njosefbeck]

Hello! So if you add 'Product' to the gatsby-config options for this plugin (so then your array of Stripe objects would be ['Price', 'Product'], you'll then see allProduct when you re-run npm start. Let me know if you experience issues with that and I can add a more thorough example!

[ammonialime]

Got it!

Looks like that is going to work.

So basically query both the price for price data and the product data for the images and cross reference them based on the id field to put the data together for each product component?

Appreciate all your help! Will see if I can get it up and running tomorrow.

[ammonialime]

Got this working this morning based on your advice.

Cross referenced the product id from the product object and price object and pulled the local images data that way.

Brought the site to 99/100 on lighthouse from mid 80s. Makes a big difference. Thanks again.

[njosefbeck]

Yay, I'm glad that it worked out for you! Let me know if you run into any other issues and I'll be happy to help debug.

[ruteckimikolaj]

Hey @ammonialime! 2 years passed and I am facing same issue :) Could you be so kind and provide detailed example how you did that ? I am more backend developer and I presume I am missing something here how did you fetched all of the images to be availble for the gatsby-image plugin.

[AndreaDiotallevi]

You can now fetch optimised images directly from allStripePrice like this:

1. Install gatsby-source-stripe

2. Configure package in gatsby-config.js (make sure downloadFiles is set to true):

 {
        resolve: `gatsby-source-stripe`,
        options: {
                objects: ["Price"],
                secretKey: process.env.GATSBY_STRIPE_SECRET_KEY,
                downloadFiles: true,
        },
 },

4. Query optimised images from localFiles:

export const query = graphql`
    {
        allStripePrice {
            edges {
                node {
                    active
                    id
                    unit_amount
                    product {
                        id
                        name
                        localFiles {
                            childImageSharp {
                                gatsbyImageData(
                                    width: 310
                                    quality: 99
                                    layout: CONSTRAINED
                                    placeholder: BLURRED
                                )
                            }
                        }
                    }
                }
            }
        }
    }
`