如何在 React 中正确使用 useQuery（apollo 客户端）与本地存储中的依赖关系？

Question

我需要一些帮助。我正在使用 NextJS 和 GraphQL 开发用户仪表板应用程序。该应用程序由四个部分组成，其中一些部分取决于存储在浏览器本地存储中的某些数据。

当客户端登录时，在此过程中存在一个自定义挂钩，该挂钩获取要在主页部分呈现的数据，然后将其中一些数据存储在浏览器本地存储中。当我需要渲染取决于存储在本地存储中的数据的其他部分时，就会出现问题，当我在开发模式下运行应用程序时，一切正常，但在应用程序崩溃时却没有。

这是组件文件

export default function UserDataUsage() {

  let services, user
  if (isWindowAvailable) services = JSON.parse(localStorage.getItem("services"))
  if (isWindowAvailable) user = JSON.parse(localStorage.getItem("user"))
  CheckLocalStorage(user)
  const { ciRif } = user
  const defaultService = services[0]["id"]
  const [service, setService] = useState(defaultService)
  const textColor = useColorModeValue("secondaryGray.900", "white");

  const { data: { contractDetails, dailyDataUsage, monthlyDataUsage, monthlyHistory, allServices }, error, loading } = useDataUsage(service, ciRif)

  if (loading) return <Spinner />

  const { plan } = contractDetails

  return (
    <Box pt={{ base: '130px', md: '80px', xl: '80px' }}>

      <>
        <SimpleGrid
          columns={1}
          gap='20px'
          mb='20px'
        >
          <Text
            color={textColor}
            fontSize='22px'
            fontWeight='700'
            lineHeight='100%'>
            Contratos
          </Text>
          <Select
            fontSize='sm'
            fontWeight='700'
            value={service}
            onChange={(e) => setService(e.target.value)}
          >
            {
              services.map((service) => {
                return <option key={service.id} value={service.id}>Contrato #{service.id}</option>
              })
            }
          </Select>
          <Text
            color={textColor}
            fontSize='22px'
            fontWeight='700'
            lineHeight='100%'>
            {plan}
          </Text>
        </SimpleGrid>

        <SimpleGrid
          columns={{ base: 1, md: 2, lg: 3, '2xl': 5 }}
          gap='20px'
          mb='20px'
        >
          <ContractDetails contractDetails={contractDetails} />
        </SimpleGrid>

        <SimpleGrid columns={{ base: 1, md: 2, xl: 2 }} gap='20px' mb='20px'>
          <TotalSpent monthlyHistory={monthlyHistory} />
          <DailyTraffic dailyDataUsage={dailyDataUsage} />
        </SimpleGrid>
        <SimpleGrid columns={{ base: 1, md: 1, xl: 2 }} gap='20px' mb='20px'>
          <DataUsage
            columnsData={columnsDataUsage}
            tableData={allServices}
          />
          <PieCard monthlyDataUsage={monthlyDataUsage} />
        </SimpleGrid>
      </>
    </Box>
  )
}

这是定制挂钩

const useDataUsage = (service, ciRif) => {

    const { data: dataUsage, error: errorDataUsage, loading: loadingDataUsage } = useQuery(USER_DATA_USAGE, { variables: { serviceId: Number(service) } })
    const { data: dataServices, error: errorServices, loading: loadingServices } = useQuery(SERVICES, { variables: { ciRif } })

    const date = new Date()

    let contractDetails, monthlyDataUsage, monthlyHistory, dailyDataUsage, allServices

    if (!loadingDataUsage && !loadingServices) {

        const { services: _services } = dataServices
        const { services, dailyDataUsage: _dailyDataUsage, monthlyHistoryDataUsage } = dataUsage
        const { idPlan: { download, upload, cap, plan }, dataUsage: { dataUsage: monthDataUsage } } = services[0]


        dailyDataUsage = _dailyDataUsage.map((_day) => {
            const { day, dayname, dataUsage: dayDataUsage } = _day
            return {
                day,
                dayname,
                dayDataUsage
            }
        })

        contractDetails = {
            download,
            upload,
            cap,
            plan,
            monthDataUsage,
            availableQuota: ((cap * 1000) - monthDataUsage)
        }

        monthlyDataUsage = {
            month: date.getMonth() + 1,
            monthDataUsage,
            cap: (cap * 1000)
        }

        monthlyHistory = monthlyHistoryDataUsage

        allServices = _services.map((service) => {
            const { id, idPlan: { plan, cap }, dataUsage: { dataUsage } } = service

            return {
                id,
                plan,
                quota: (cap / 1000000).toFixed(2),
                dataUsage: (dataUsage / 1000000000).toFixed(2),
                status: dataUsage >= (cap * 1000) ? "ACTIVO - LIMITADO" : "ACTIVO"

            }
        })
    }

    return { data: { contractDetails, dailyDataUsage, monthlyDataUsage, monthlyHistory, allServices }, error: errorDataUsage || errorServices, loading: loadingDataUsage || loadingServices }

}

我试图通过在自定义钩子中实现 useEffect 来等待来自本地存储的数据来解决这个问题，但这一直导致错误，目前我找不到解释为什么应用程序只在开发中正确运行