0

我的 NuxtJS 和 Apollo 请求有问题。解决请求需要太多时间 - 几乎 5 秒。我已经在本地、开发和生产中尝试过。

这是我指向 WPGraphQL 的 apollo 的 nuxt.config 部分：

apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'https://example.com/graphql',
      },
    },
    defaultOptions: {
      // See 'apollo' definition
      // For example: default query options
      $query: {
        loadingKey: 'loading',
        fetchPolicy: 'cache-and-network',
      },
    },
  },

这是我的 Nuxt 页面模板

<template>
  <div>
    <Jumbotron
      v-if="page.frontPage.heroSlider"
      :hero-slider="page.frontPage.heroSlider"
    />
    <Introduction
      v-if="page.frontPage.serviceGroups"
      :service-groups="page.frontPage.serviceGroups"
      :services-image="page.frontPage.servicesImage"
    />
    <CTA
      :cta-text="page.frontPage.ctaText"
      :cta-link="page.frontPage.ctaLink.uri"
      :cta-button-text="page.frontPage.ctaButtonText"
    />
    <BlogGrid />
  </div>
</template>
<script>
import gql from 'graphql-tag'
import Jumbotron from '@/components/FrontPage/Jumbotron'
import Introduction from '@/components/FrontPage/Introduction'
import CTA from '@/components/FrontPage/CTA'
import BlogGrid from '@/components/FrontPage/BlogGrid'
export default {
  components: {
    Jumbotron,
    Introduction,
    CTA,
    BlogGrid,
  },
  apollo: {
    page: {
      prefetch: true,
      query: gql`
        query getHomePage {
          page(id: "/", idType: URI) {
            id
            content
            frontPage {
              heroSlider {
                heroSlideText
                heroSlideImage {
                  altText
                  srcSet
                  sourceUrl(size: JUMBOTRON_SIZE)
                }
              }
              serviceGroups {
                iconName
                title
                description
              }
              servicesImage {
                sourceUrl
                srcSet
                altText
              }
              ctaText
              ctaButtonText
              ctaLink {
                ... on Page {
                  id
                  uri
                }
              }
            }
          }
        }
      `,
    },
  },
}
</script>

一切都完美呈现，除了这个请求需要超过 5 秒。您可以从 GTMetrix 等中签出。基本上 TTFB 是 5.4 秒等。

生产部署到 Vercel，这是我的 Vercel 配置>

{
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {
        "generateStaticRoutes": true
      }
    }
  ]
}

我有一些其他路线可以正常工作，返回的图像是 70-150 kB，网站不包含大图像或文件。

live ise generator.bm.ee 中的原始站点来衡量质量。所有其他路线的响应时间都很短，但 / 路线的响应速度非常慢。

我还没有找到任何关于如何实现 Nuxt、Apollo 和 WPGraphQL 的好的说明。

4

0 回答 0