Question 11813 in Shopify Question posted in
The Shopify help center can be found here.

Import async function from different file to component – Shopify

I’m having an issue with my learning of nextJs, and specially with async await. I’m collecting the data from Shopify

So On my file library.js, I have all my queries :

const domain = process.env.API_URL
const storefrontAccessToken = process.env.ACCESS_TOKEN


async function ShopifyData(query) {
    const URL = `https://${domain}/api/2021-07/graphql.json`

    const options = {
        path: URL,
        method: "POST",
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json",
            "X-Shopify-Storefront-Access-Token": storefrontAccessToken
        },
        body: JSON.stringify({query})
    }

    try {
        const data = await fetch(URL, options).then(response => {
            return response.json()
        })

        return data
    } catch (error) {           
      throw error
  }
}


export async function getProducts(handle) {
    const query = `
  {
    my query that works, I tested it
  }`

    const response = await ShopifyData(query)

    return response
}

And I want to use the function getProducts, in my functionnal component and I’m doing like so :

export default function ProductCard () {


  const  productDetails = async () => {
        let test = await getProduct("copy-of-boost");

        return test;
    }

    useEffect(() => {
        productDetails();

    })

And I get this error :

Unhandled Runtime Error
TypeError: Failed to fetch

https://i.stack.imgur.com/rMmKv.png

I tried it on a page with getStaticProps and pass it all down it works.
But I want to use it directly in different components.

Thank you for your help and suggestions for a better code.

Nice day

More info in the console I have :

shopify.js?1fa9:20          Uncaught (in promise) TypeError: Failed to fetch
    at _callee$ (shopify.js?1fa9:20:28)
    at tryCatch (runtime.js?ecd4:45:16)
    at Generator.invoke [as _invoke] (runtime.js?ecd4:274:1)
    at Generator.prototype.<computed> [as next] (runtime.js?ecd4:97:1)
    at asyncGeneratorStep (shopify.js:12:28)
    at _next (shopify.js:30:17)
    at eval (shopify.js:35:13)
    at new Promise (<anonymous>)
    at eval (shopify.js:27:16)
    at ShopifyData (shopify.js?1fa9:5:27)
    at _callee$ (shopify.js?1fa9:157:28)
    at tryCatch (runtime.js?ecd4:45:16)
    at Generator.invoke [as _invoke] (runtime.js?ecd4:274:1)
    at Generator.prototype.<computed> [as next] (runtime.js?ecd4:97:1)
    at asyncGeneratorStep (shopify.js:12:28)
    at _next (shopify.js:30:17)
    at eval (shopify.js:35:13)
    at new Promise (<anonymous>)
    at eval (shopify.js:27:16)
    at getProduct (shopify.js?1fa9:86:33)
    at _callee$ (ProductCard.js?3da2:36:36)
    at tryCatch (runtime.js?ecd4:45:16)
    at Generator.invoke [as _invoke] (runtime.js?ecd4:274:1)
    at Generator.prototype.<computed> [as next] (runtime.js?ecd4:97:1)
    at asyncGeneratorStep (ProductCard.js?3da2:4:32)
    at _next (ProductCard.js?3da2:4:32)
    at eval (ProductCard.js?3da2:4:32)
    at new Promise (<anonymous>)
    at eval (ProductCard.js?3da2:4:32)
    at productDetails (ProductCard.js?3da2:35:26)
    at eval (ProductCard.js?3da2:42:9)
    at invokePassiveEffectCreate (react-dom.development.js?ac89:23487:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:3994:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4056:1)
    at flushPassiveEffectsImpl (react-dom.development.js?ac89:23574:1)
    at unstable_runWithPriority (scheduler.development.js?bcd2:468:1)
    at runWithPriority$1 (react-dom.development.js?ac89:11276:1)
    at flushPassiveEffects (react-dom.development.js?ac89:23447:1)
    at eval (react-dom.development.js?ac89:23324:1)
    at workLoop (scheduler.development.js?bcd2:417:1)
    at flushWork (scheduler.development.js?bcd2:390:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:157:1)
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I had to put NEXT_PUBLIC before the names of my variable, so my components could access the .env file, like so :

    const domain = process.env.NEXT_PUBLIC_API_URL
const storefrontAccessToken = process.env.NEXT_PUBLIC_ACCESS_TOKEN

  2. 0

    No need path in options, when use fetch in react js.

    const options = {
        method: "POST",
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json",
            "X-Shopify-Storefront-Access-Token": storefrontAccessToken
        },
        body: JSON.stringify(query)
}

    use below await block instead your code. Might be work:)

    const response = await fetch(URL,options);
const data = await response.json()
return data;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search