example-product.md

id	title	price	tva	quantity	unit	categories	image	active
amaretti	Amaretti	6	TVA 5.5	100	grammes	src/content/categories/biscuits.md	../../uploads/Amaretti.jpg	true

Les Amaretti sont des biscuits aux amandes et à la fleur d'oranger, naturellement sans gluten. Croquant à l'extérieur et légèrement moelleux à l'intérieur, ce biscuits nous rappelle les parfums d'Orient.

Composition : Poudre d’amande, sucre semoule, blanc d’oeuf BIO, zestes de citron, eau de fleur d’oranger.

Tous nos biscuits et gâteaux sont élaborés dans notre atelier où sont également utilisés des produits contenant les allergènes suivants : fruits à coque (amande, noisette, noix, noix de pécan, noix de coco,...), gluten, sésames, oeuf et lactose.

fragment.js

/**
 * fragment for product element
 */
export const Product = () => {
  useStaticQuery(graphql`
    fragment Product on Mdx {
      frontmatter {
        id
        title
        price
        unit
        quantity
        onlyShop
        onlyShopOrLyon
        withDays
        tva
        image {
          publicURL
          childImageSharp {
            fluid(maxWidth: 700, maxHeight: 600) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
      fields {
        slug
      }
      body
      excerpt(pruneLength: 200, truncate: true)
    }
  `);
};

getstock.js

// function for call api snipcart from netlify function
// ! this function don't use the products variations
const fetch = require('node-fetch');
const {GATSBY_SNIPCART_PRIVATE_KEY} = process.env;

const API_ENDPOINT = 'https://app.snipcart.com/api/products?limit=100&offset=0';

const callAPI = async (event, context) => {
  const auth =
    'Basic ' +
    Buffer.from(GATSBY_SNIPCART_PRIVATE_KEY + ':' + '').toString('base64');
  const t = await fetch(API_ENDPOINT, {
    headers: {
      Authorization: auth,
      Accept: 'application/json',
    },
  })
    .then(response => response.json())
    .then(data => {
      let results = [];
      if (data) {
        const {items} = data;
        if (items) {
          results = items.map(i => {
            return {
              id: i.userDefinedId,
              name: i.name,
              stock: i.stock,
            };
          });
        }
      }
      return results;
    })
    .catch(error => ({statusCode: 422, body: String(error)}));

  return {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers':
        'Origin, X-Requested-With, Content-Type, Accept',
    },
    body: JSON.stringify(t),
  };
};

exports.handler = callAPI;

store.js

/** store app for stock **/
import React, {createContext, useReducer, useEffect} from 'react';
import axios from 'axios';

const url_stock = '/.netlify/functions/getstock';

export const initialState = {
  stock: [],
};

// create context for dispatch
export const StoreContext = createContext(initialState);

const reducer = (state, action) => {
  switch ((state, action.type)) {
    case 'setStock':
      return {...state, ...{stock: action.payload}};
    default:
      return state;
  }
};

const StoreProvider = ({children}) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  // update state
  useEffect(() => {
    axios
      .get(url_stock)
      .then(function ({data}) {
        if (Array.isArray(data)) {
          dispatch({type: 'setStock', payload: data});
        }
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      });
  }, []);

  return (
    <StoreContext.Provider value={state}>{children}</StoreContext.Provider>
  );
};

export default StoreProvider;

Thanks for sharing these examples. How do I get the stock for just one product in getstock.js?

hi, yes it's possible. You can request a product with id => https://docs.snipcart.com/v3/api-reference/products#get-productsid