解构值 nextjs：ReferenceError：初始化前无法访问“XXX”

Question

我正在将 Apollo Client 与 Nextjs 一起使用，并希望解构值以便于阅读。

我正在尝试这样做 insisde pages/index.js

import { useQuery } from '~/lib/apollo'
return {
    const { data: { allAwards = []} = {} } = useQuery(allAwards) //ReferenceError: Cannot access 'allAwards' before initialization
    .....
}

lib/阿波罗

export const useQuery = function(query) {
  const { enqueueSnackbar } = useSnackbar()
  const { options = {} } = sortParams([...arguments])
  const { loading, data: queryData, error, refetch } = HookQuery(query, {
    fetchPolicy: 'cache-and-network',
    ...options,
  })
  let transformData = {}
  if (queryData) transformData = new ApolloClass(queryData).start()
  if (error && !options.noError) hookLogger(enqueueSnackbar, error)
  return {
    queryData,
    error,
    loading,
    data: transformData,
    refetch,
  }
}

数据

{
  data: {
   allAwards: []
  }
}

Answer 1

您正在使用解构赋值从useQuery 挂钩返回的值中声明一个名为allAwards 的变量——然后您尝试将相同的变量传递给挂钩。如错误所示，您不能在声明之前使用变量。

const { data: { allAwards = []} = {} } = useQuery(allAwards)
                ^ this                            ^ same as this

首先，没有理由将查询结果用作useQuery 中的第一个参数——这个值应该始终是一个 DocumentNode 对象（这是使用gql 标记模板时返回的内容）。也许你在某处有命名冲突？