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

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

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

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

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