Development discussions around Shopify APIs
Hi,
When i use Postman to do API call, it works and i get data back but when i use fetch in my Sveltekit app, i get errors: '[API] Invalid API key or access token (unrecognized login or wrong password)'.
I am using this format for the call https://{username}:{password}@{shop}.myshopify.com/admin/api/2021-10/graphql.json
This is my fetch
try {
const result = await fetch(import.meta.env.VITE_SHOPIFY_API_ENDPOINT, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Shopify-Storefront-Access-Token': import.meta.env.VITE_SHOPIFY_STOREFRONT_API_TOKEN
},
body: JSON.stringify({ query, variables })
}).then((res) => res.json());
if (result.errors) {
console.log({ errors: result.errors });
} else if (!result || !result.data) {
console.log({ result });
return 'No results found.';
}
console.log(result);
return result.data;
} catch (error) {
console.log(error);
}
@oso this is what worked for me. If you are working off that log rocket blog I had a lot of trouble with that setup as well.
Here is what is working for me at the moment but I am still working on it.
<script context="module">
/**
* @type {import('@sveltejs/kit').Load}
*/
export async function load({ page, fetch, session, stuff }) {
var myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/json');
myHeaders.append('X-Shopify-Storefront-Access-Token', `${import.meta.env.VITE_SHOPIFY_STOREFRONT_API_TOKEN}`);
var graphql = JSON.stringify({
query: `{
products(sortKey: TITLE, first: 100) {
edges {
node {
id
handle
description
title
totalInventory
productType
variants(first: 5) {
edges {
node {
id
title
quantityAvailable
price
}
}
}
priceRange {
maxVariantPrice {
amount
currencyCode
}
minVariantPrice {
amount
currencyCode
}
}
images(first: 1) {
edges {
node {
src
altText
}
}
}
}
}
}
}`,
variables: {}
});
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: graphql,
redirect: 'follow'
};
const url = `${import.meta.env.VITE_SHOPIFY_API_ENDPOINT}`
const products = await fetch(
`${import.meta.env.VITE_SHOPIFY_API_ENDPOINT}/graphql.json`,
requestOptions
)
.then((response) => response.text())
.then((result) => {
return result;
})
.catch((error) => console.log('error', error));
return {
props: {
products: JSON.parse(products)
}
};
}
</script>
<script>
export let products;
</script>
<h1>Products</h1>
<p>Product List</p>
{#each products.data.products.edges as product}
<p>{product.node.title} </p>
{/each}
Right now I am trying to get a products.json.js to store the data and then pass to the products.svelte file but I have not be successful. Let me know if you find a better way.
Connect your PayPal account to allow your customers to checkout using the PayPal gateway a...
ByYour online store speed can enhance your store’s discoverability, boost conversion rates a...
ByShopping is at our fingertips with mobile devices. Is your theme optimized to be user-frie...
By