Import async function from different file to component-CodePudding

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)

CodePudding user response：

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;

CodePudding user response：

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