如何在静态生成的 nuxt.js 页面上仅从客户端执行 api 调用（graphql）？答案

【问题标题】：How can I do api calls (graphql) only from client on a static generated nuxt.js page?如何在静态生成的 nuxt.js 页面上仅从客户端执行 api 调用（graphql）？
【发布时间】：2021-08-24 11:54:34
【问题描述】：

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

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

<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”。

【问题讨论】：

如果问题是如何只在客户端做某事，你可以使用 if(process.client){ ... }
这个问题太模糊了。 fetch() hook 或任何其他你已经在使用的。
我做了一个更具体的编辑。
我添加了这个来调用 fetch，但是得到了错误'this.$fetch is not a function':mounted () { this.fetchRate() }, methods: { fetchRate () { this.$fetch() } }

标签： nuxt.js nuxtjs

【解决方案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，在浏览浏览器历史记录时也是如此。在 exchangeates 数组 exchangerates: [{ }] 中声明一个空对象对于防止未定义的错误也很重要。

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

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

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

【讨论】：