Closed ammonialime closed 3 years ago
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!
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?
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!
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.
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.
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.
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.
You can now fetch optimised images directly from allStripePrice
like this:
Install gatsby-source-stripe
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,
},
},
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
)
}
}
}
}
}
}
}
`
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.
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