Comments (8)
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.
from gatsby-source-stripe.
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!
from gatsby-source-stripe.
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?
from gatsby-source-stripe.
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!
from gatsby-source-stripe.
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.
from gatsby-source-stripe.
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.
from gatsby-source-stripe.
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.
from gatsby-source-stripe.
You can now fetch optimised images directly from allStripePrice
like this:
-
Install
gatsby-source-stripe
-
Configure package in
gatsby-config.js
(make suredownloadFiles
is set totrue
):
{
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
)
}
}
}
}
}
}
}
`
from gatsby-source-stripe.
Related Issues (20)
- Cannot query field "allStripeSku" on type "Query" even with a valid secret key HOT 11
- Products with recurring payment not shown on Gatsby shop HOT 4
- Q1 Updates HOT 1
- Is there a way of getting back the price of a subscription (product) HOT 1
- Is there a ay of getting back the price of a subscription (product) HOT 4
- Support for the new Prices API HOT 3
- Price instead of SKU HOT 6
- Pulling product details HOT 3
- Get Price in stripeProduct query HOT 1
- Images not downloaded for Price objects HOT 1
- Cannot query product field on price object HOT 4
- Support for "tiers" on the Prices API HOT 4
- Gatsby 3 touchNode deprecation warning HOT 4
- [HELP WANTED] - GatsbyV4 [bug] - error while running the sourceNodes lifecycle HOT 2
- Error "Cannot query field \"product\" on type \"StripePrice\"." HOT 3
- Upgrade backend implementation to use ES modules
- Enable GraphQL support for Product images HOT 4
- Product object not showing in the graphQL HOT 3
- Out of date Stripe SDK API version HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gatsby-source-stripe.