时间戳

首页 > 解决方案 > Nuxt/Strapi/Shopify-API：在 init 上加载数据时减少 nuxt 应用程序加载时间

vue.js - Nuxt/Strapi/Shopify-API：在 init 上加载数据时减少 nuxt 应用程序加载时间

问题描述

我刚刚发布了我的应用程序，包括一个Nuxt.js前端、一个Strapi CMS 和用于结账管理的Headless Shopify 。为了实现一个全局购物车组件，我需要在 init 上加载所有产品，如下一部分所示。数据来自 CMS。

./plugins/products.js

// Load products on init

export default async ({app}) => {
  await app.store.dispatch('shop/products/setProducts');
}

./store/products.js

export const actions = {
  async setProducts(state) {
    const allProducts = await this.$axios.$get('/products');
    state.commit('setProducts', allProducts);
  },

CMS 通过 GraphQL/Apollo 客户端从 Shopify Storefront API 获取数据，如下所示：

./controllers/product.js

  async find(ctx) {
    let entities;
    if (ctx.query._q) {
      entities = await strapi.services.product.search(ctx.query);
    } else {
      entities = await strapi.services.product.find(ctx.query);
    }

    for (entity of entities) {
      const graphId = btoa('gid://shopify/Product/' + entity.shopifyId);
      try {
        await client.query({
          query: gql`
                  query {
                    node(id: "${graphId}") {
                      ... on Product {
                        id
                        title
                        productType
                        variants(first: 250) {
                          edges {
                            node {
                              title
                              id
                              availableForSale
                              sku
                              priceV2 {
                                amount
                                currencyCode
                              }
                              compareAtPriceV2 {
                                amount
                                currencyCode
                              }
                              requiresShipping
                              selectedOptions {
                                name
                                value
                              }
                            }
                          }
                        }
                      }
                    }
                  }`
        }).then((product) => {
          entity.shopify = {
            id: product.data.node.id,
            product_type: product.data.node.id,
            variants: product.data.node.variants,
          }
        });
      } catch (e) {
        console.log(e);
      }
    }
    return entities.map(entity => sanitizeEntity(entity, {model: strapi.models.product}));
  },
  },

阿波罗设置：

const ApolloClient = require('apollo-boost').default;
const fetch = require('node-fetch');
const {InMemoryCache, gql} = require('apollo-boost');

const client = new ApolloClient({
  uri: 'https://santras.myshopify.com/api/graphql',
  cache: new InMemoryCache(),
  fetch: fetch,
  headers: {
    'X-Shopify-Storefront-Access-Token': 'e908298c617e035c47c62ae449887b3c'
  }
});

最大的问题是，从 shopify api 加载所有产品和变体非常慢。没有缓存所有产品的第一次加载最多需要 20000 毫秒。缓存后，每个请求/products最多需要 1.500 秒。

现在，很多测试用户都在经历 nuxt 应用加载时间过长的问题。在显示某些内容之前，会有一个 nuxt 加载循环 5-10 秒。有没有办法在加载插件数据时已经显示内容？

标签： vue.jsnuxt.jsshopifystrapishopify-storefront-api

解决方案

尝试查看 Nuxt 中的Fetch Hook。这可以获取异步数据。
在组件方面，它公开了 $fetchState ，其中包含以下状态，特别是$fetchState.pending在获取过程中为真。它允许您在等待从 API 取回数据时放置一些数据。

<template>
  <div v-if="$fetchState.pending">Fetching data from Shopify ...</div>
  <div v-else>
   <div v-for="product in products" ... />
  </div>
</template>

<script>
export default {
 data() {
  return {
   products: []
  }
 },
 async fetch() {
  this.products= await strapi.services.product.search(this.query);
 }
}
</script>

推荐阅读