从不同文件导入异步函数到组件

Question

我在学习 nextJs 时遇到问题，特别是在异步等待方面。我正在从 Shopify

收集数据

所以在我的文件 library.js 上，我有我所有的查询：

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
}

我想在我的功能组件中使用函数 getProducts，我正在这样做 :

export default function ProductCard () {


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

        return test;
    }

    useEffect(() => {
        productDetails();

    })

我收到这个错误：

未处理的运行时错误 TypeError: 获取失败

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

我在带有 getStaticProps 的页面上尝试了它，并将它全部传递下来它起作用了。但是我想在不同的组件中直接使用它。

感谢您对更好代码的帮助和建议。

美好的一天

更多信息在我的控制台中：

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 (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)

Answer 1

在react js中使用fetch时，选项中不需要路径

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

使用下面的 await 块代替您的代码。可能是工作:)

const response = await fetch(URL,options);
const data = await response.json()
return data;

Answer 2

我必须在我的变量名称前加上 NEXT_PUBLIC，这样我的组件才能访问 .env 文件，就像这样：

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

从不同文件导入异步函数到组件

Import async function from different file to component

asynchronous

async-await

reactjs

next.js