products.js component with the new Stripe API v3

products.js

import React from 'react'
import { graphql, StaticQuery } from 'gatsby'

import Product from './product.js'

const PRODUCTS_QUERY = graphql`
	query allProducts {
		allStripePrice(filter: {active: {eq: true}}) {
			edges {
				node {
					nickname
					unit_amount
					id
					product {
						id
					}
				}
			}
		}
		allStripeProduct(filter: {active: {eq: true}}) {
			edges {
				node {
					id
					name
					images
				}
			}
		}
	}
`

const Products = () => (
	<StaticQuery query={PRODUCTS_QUERY} render={
			data => {
				const { allStripePrice, allStripeProduct } = data
				return allStripeProduct.edges.map( ({node}) => {
					const productId = node.id
					const priceVariation = allStripePrice.edges.filter(({ node }) => productId === node.product.id )
					return (
						<Product key={node.id} 
							item={node} 
							prices={priceVariation} 
						/>
					)
				})
			}
		} 
	/>
)

export default Products