如何仅从客户端在静态生成的 nuxt.js 页面上进行 api 调用 (graphql)？

Question

我想从 nuxt.js 生成的静态页面上的 graqphql 端点选择一些额外的数据。我该怎么做（哪个hook是怎么用的）？

编辑，更具体地说：我有以下组件，应该获取每日准确的汇率。这不一定在页面加载时完成。所以我想在页面加载后选择它。这些页面是生成的静态页面并且有一个描述组件，它有这个组件：

<template>
  <strong :v-if="exchangerate.rate">
    / {{ exchangerate.currency }} {{ Math.round(price * exchangerate.rate).toLocaleString('en-US') }}
  </strong>
</template>

<script>
import { gql } from 'graphql-tag'

export default ({
  fetchOnServer: false,
  props: {
    price: {
      type: Number,
      default: null
    },
    currency: {
      type: String,
      default: 'USD'
    }
  },
  data () {
    return {
      exchangerate: {}
    }
  },
  async fetch ({ app }) {
    await app.apolloProvider.defaultClient.query({
      query: gql`
        query getSpecificRateQuery($where: JSON) {
          exchangerates(where: $where) {
            currency
            rate
            updated_at
          }
        }
      `,
      variables: {
        where: { currency: this.currency }
      }
    }).then(({ data }) => {
      const exchangerate = {}
      exchangerate.currency = data.exchangerates[0].currency
      exchangerate.rate = data.exchangerates[0].rate
      return { exchangerate }
    })
  }
})
</script>

fetch() 好像不行。页面显示“NaN”。

Answer 1

所以这按预期工作：

<template>
  <strong v-if="!loading && exchangerates[0].rate">
    / {{ exchangerates[0].currency }} {{ Math.round(price * exchangerates[0].rate).toLocaleString('en-US') }}
  </strong>
</template>

<script>
import { getSpecificRateQuery } from '~/graphql/products-queries'

export default ({
  props: {
    price: {
      type: Number,
      default: 0
    },
    currency: {
      type: String,
      default: 'USD'
    }
  },
  data () {
    return {
      loading: 0,
      exchangerates: [{ }]
    }
  },
  apollo: {
    $loadingKey: 'loading',
    exchangerates: {
      fetchPolicy: 'no-cache',
      prefetch: true,
      query: getSpecificRateQuery,
      variables () {
        return {
          where: { currency: this.currency }
        }
      }
    }
  }
})
</script>

我必须将缓存设置为 fetchPolicy: 'no-cache'，因此每次都会调用 api，浏览浏览器历史记录时也是如此。在 exchangerates 数组 exchangerates: [{ }] 中声明一个空对象对于防止未定义的错误也很重要。

（'getSpecificRateQuery' 与上面的查询相同。）

并且我在父组件中将组件包装成<client-only>：

<client-only>
  <PriceExchange currency="USD" :price="product.price" />
</client-only>

如何仅从客户端在静态生成的 nuxt.js 页面上进行 api 调用 (graphql)？

How can I do api calls (graphql) only from client on a static generated nuxt.js page?

nuxt.js

nuxtjs