javascript - 解构值 nextjs : ReferenceError: Cannot access 'XXX' before initialization

Question

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

我正在尝试在 pages/index.js

中执行此操作

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

lib/apollo

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 Hook 返回的值中声明一个名为 allAwards 的变量，然后尝试将同一变量传递给钩。正如错误所示，在声明变量之前不能使用变量。

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

没有理由首先使用查询结果作为 useQuery 中的第一个参数 - 该值应该始终是 DocumentNode 对象(这是当您使用 gql 标记模板)。也许您在某个地方存在命名冲突？