Hello,
I’m new to the Shopify Storefront API.
I was trying to integrate and use the API within a Nuxt 3 Project to get familiar with it since I’m going to use it for another more serious project of mine, but I’m having issues dealing with certain queries and mutations.
What works ?
I was able to integrate the Storefront API Client to a Nuxt 3 Project and use some GraphQL queries to fetch Products on a Test Store that I’ve created.
For that I’ve done the following :
- Install the Storefront API Client Package via :
npm install /storefront-api-client --s
- Setup the Storefront API Client in a file called
*plugins/shopify.js*:
import { createStorefrontApiClient } from "@shopify/storefront-api-client";
export default defineNuxtPlugin(nuxtApp => {
const client = createStorefrontApiClient({
storeDomain: nuxtApp.$config.public.shopifyStoreDomain,
apiVersion: "2024-07",
publicAccessToken: nuxtApp.$config.public.shopifyPublicAccessToken,
});
/* Inject into the context as $shopify */
return {
provide: {
shopify: client
}
};
});
- Made sure to update my
*nuxt.config.ts*file :
export default defineNuxtConfig({
/* Config Here... */
/* Add the custom plugin */
plugins: ["~/plugins/shopify.js"],
/* Config Here ... */
/* Add Shopify Environment Variables */
runtimeConfig: {
public: {
shopifyStoreDomain: process.env.SHOPIFY_STORE_DOMAIN,
shopifyPublicAccessToken: process.env.SHOPIFY_PUBLIC_ACCESS_TOKEN
},
},
});
- I was then able to start creating interface functions in a file called
*interfaces/shopify_interface.js*to use within my project, such as :
/* Fetch All Products with an adjustable limit */
const fetchAllProducts = async (first = 10) => {
try {
const query = `
query {
products(first: ${first}) {
edges {
node {
id
title
handle
description
variants(first: 1) {
edges {
node {
id
priceV2 {
amount
currencyCode
}
}
}
}
images(first: 1) {
edges {
node {
src
altText
}
}
}
}
}
}
}
`;
const variables = { first };
const response = await $shopify.request(query, variables);
return processProducts(response.data.products.edges);
} catch (error) {
console.error("Error fetching all Products:", error);
throw error;
}
};
- Then I could simply reuse the functions in a page
*src/pages/index.vue*:
- Which succeded with the Products fetched from my Test Store displayed on the page :
What does not work ?
Following this, I wanted to add those Test Products to a local Cart (not a Shopify Cart to avoid API calls for each Product added) by respecting the format and at Checkout create the final Cart directly with all the Products inside.
That’s where I’m stuck, by trying this query within my interface function :
/* Create a Cart */
const createCart = async (lines = [], attributes = []) => {
const query = `
mutation createCart($cartInput: CartInput) {
cartCreate(input: $cartInput) {
cart {
id
createdAt
updatedAt
checkoutUrl
lines(first: 10) {
edges {
node {
id
merchandise {
... on ProductVariant {
id
}
}
}
}
}
attributes {
key
value
}
cost {
totalAmount {
amount
currencyCode
}
subtotalAmount {
amount
currencyCode
}
totalTaxAmount {
amount
currencyCode
}
totalDutyAmount {
amount
currencyCode
}
}
}
}
}
`;
const variables = {
cartInput: {
lines: lines.map(line => ({
quantity: line.quantity,
merchandiseId: line.merchandiseId,
})),
attributes: attributes.length ? attributes.map(attr => ({
key: attr.key,
value: attr.value
})) : []
}
};
try {
const response = await $shopify.request(query, variables);
return response.data.cartCreate.cart;
} catch (error) {
console.error("Error creating Cart:", error);
throw error;
}
};
This is an example of the format of the *lines* argument that is passed to the function :
{quantity: 1, merchandiseId: 'gid://shopify/ProductVariant/48653232472396'}
And after being formatted in the *variables* object, this is what is sent along with the mutation :
{
"cartInput": {
"lines": [
{
"quantity": 1,
"merchandiseId": "gid://shopify/ProductVariant/48653232472396"
}
],
"attributes": []
}
}
Despite all of this, it keeps returing an empty Cart :
{
"id": "gid://shopify/Cart/...",
"createdAt": "2024-09-04T23:53:01Z",
"updatedAt": "2024-09-04T23:53:01Z",
"checkoutUrl": "https://MYSTORE.myshopify.com/cart/c/...",
"lines": {
"edges": []
},
"attributes": [],
"cost": {
"totalAmount": {
"amount": "0.0",
"currencyCode": "XXX"
},
"subtotalAmount": {
"amount": "0.0",
"currencyCode": "XXX"
},
"totalTaxAmount": null,
"totalDutyAmount": null
}
}
If someone would be kind enough to help me, as I been struggling for quite a while trying different solutions, even restarting projects with other packages etc…
Thank you in advance for your understanding.
m7919821