仅当在浏览器中刷新页面时，数据在Apollo客户端的用户查询中才变得未定义 [英] Data becomes undefined in usequery of apollo client only when refreshing the page in the browser

查看：0
本文介绍了仅当在浏览器中刷新页面时，数据在Apollo客户端的用户查询中才变得未定义的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

以下代码在热重新加载Reaction应用程序时起作用。但当我按刷新按钮(或按F5)时，应用程序崩溃，提示数据未定义。

我已经尝试了FETCH-CACHE-POLICATION，每个策略 在GQL操场和阿波罗客户端DevTools中都没有错误。查询运行正常。

import React, { useContext } from 'react';
import { useQuery } from '@apollo/client';
import { Grid } from 'semantic-ui-react';
import PostCard from '../components/PostCard';
import PostForm from '../components/PostForm';
import { AuthContext } from '../context/auth';
import { FETCH_POSTS_QUERY } from '../util/graphql';

function Home() {
  const { user } = useContext(AuthContext);
  const { loading, data } = useQuery(FETCH_POSTS_QUERY);
  // console.log(loading, data);
  const { getPosts: posts } = data;
  return (
    <Grid columns={3}>
      <Grid.Row className="page-title">
        <h1>Recent Posts</h1>
      </Grid.Row>
      <Grid.Row>
        {user && (
          <Grid.Column>
            <PostForm />
          </Grid.Column>
        )}
        {loading ? (
          <h1>Loading Posts...</h1>
        ) : (
         posts &&
          posts.map((post) => (
            <Grid.Column key={post.id} style={{ 
marginBottom: '20px' }}>
              <PostCard post={post} />
            </Grid.Column>
          ))
        )}
      </Grid.Row>
    </Grid>
  );
}

export default Home;

这是FETCH_POST_QUERY

import { gql } from '@apollo/client';

export const FETCH_POSTS_QUERY = gql`
  {
    getPosts {
      id
      body
      createdAt
      username
      likeCount
      likes {
        username
      }
      commentCount
      comments {
        id
        username
        createdAt
        body
      }
    }
  }
`;

这是错误

main.chunk.js:1427 Uncaught TypeError: Cannot destructure property 'getPosts' of 'data' as it is undefined.
    at Home (main.chunk.js:1427)
    at renderWithHooks (0.chunk.js:75555)
    at mountIndeterminateComponent (0.chunk.js:78317)
    at beginWork (0.chunk.js:79516)
    at HTMLUnknownElement.callCallback (0.chunk.js:64505)
    at Object.invokeGuardedCallbackDev (0.chunk.js:64554)
    at invokeGuardedCallback (0.chunk.js:64614)
    at beginWork$1 (0.chunk.js:84356)
    at performUnitOfWork (0.chunk.js:83192)
    at workLoopSync (0.chunk.js:83129)
    at renderRootSync (0.chunk.js:83095)
    at performSyncWorkOnRoot (0.chunk.js:82712)
    at scheduleUpdateOnFiber (0.chunk.js:82300)
    at updateContainer (0.chunk.js:85837)
    at 0.chunk.js:86369
    at unbatchedUpdates (0.chunk.js:82852)
    at legacyRenderSubtreeIntoContainer (0.chunk.js:86368)
    at Object.render (0.chunk.js:86451)
    at Module.<anonymous> (main.chunk.js:1301)
    at Module../src/index.js (main.chunk.js:1376)
    at __webpack_require__ (bundle.js:852)
    at fn (bundle.js:151)
    at Object.1 (main.chunk.js:2488)
    at __webpack_require__ (bundle.js:852)
    at checkDeferredModules (bundle.js:46)
    at Array.webpackJsonpCallback [as push] (bundle.js:33)
    at main.chunk.js:1
Home @ main.chunk.js:1427
renderWithHooks @ 0.chunk.js:75555
mountIndeterminateComponent @ 0.chunk.js:78317
beginWork @ 0.chunk.js:79516
callCallback @ 0.chunk.js:64505
invokeGuardedCallbackDev @ 0.chunk.js:64554
invokeGuardedCallback @ 0.chunk.js:64614
beginWork$1 @ 0.chunk.js:84356
performUnitOfWork @ 0.chunk.js:83192
workLoopSync @ 0.chunk.js:83129
renderRootSync @ 0.chunk.js:83095
performSyncWorkOnRoot @ 0.chunk.js:82712
scheduleUpdateOnFiber @ 0.chunk.js:82300
updateContainer @ 0.chunk.js:85837
(anonymous) @ 0.chunk.js:86369
unbatchedUpdates @ 0.chunk.js:82852
legacyRenderSubtreeIntoContainer @ 0.chunk.js:86368
render @ 0.chunk.js:86451
(anonymous) @ main.chunk.js:1301
./src/index.js @ main.chunk.js:1376
__webpack_require__ @ bundle.js:852
fn @ bundle.js:151
1 @ main.chunk.js:2488
__webpack_require__ @ bundle.js:852
checkDeferredModules @ bundle.js:46
webpackJsonpCallback @ bundle.js:33
(anonymous) @ main.chunk.js:1
0.chunk.js:88061 The above error occurred in the <Home> component:

    at Home (http://localhost:3000/static/js/main.chunk.js:1420:63)
    at Route (http://localhost:3000/static/js/0.chunk.js:90932:29)
    at div
    at Container (http://localhost:3000/static/js/0.chunk.js:102737:24)
    at Router (http://localhost:3000/static/js/0.chunk.js:90567:30)
    at BrowserRouter (http://localhost:3000/static/js/0.chunk.js:90187:35)
    at AuthProvider (http://localhost:3000/static/js/main.chunk.js:1161:85)
    at App
    at ApolloProvider (http://localhost:3000/static/js/0.chunk.js:6087:19)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console.<computed> @ 0.chunk.js:88061
logCapturedError @ 0.chunk.js:80540
update.callback @ 0.chunk.js:80568
callCallback @ 0.chunk.js:72944
commitUpdateQueue @ 0.chunk.js:72967
commitLifeCycles @ 0.chunk.js:81172
commitLayoutEffects @ 0.chunk.js:83829
callCallback @ 0.chunk.js:64505
invokeGuardedCallbackDev @ 0.chunk.js:64554
invokeGuardedCallback @ 0.chunk.js:64614
commitRootImpl @ 0.chunk.js:83563
unstable_runWithPriority @ 0.chunk.js:96350
runWithPriority$1 @ 0.chunk.js:71911
commitRoot @ 0.chunk.js:83406
performSyncWorkOnRoot @ 0.chunk.js:82748
scheduleUpdateOnFiber @ 0.chunk.js:82300
updateContainer @ 0.chunk.js:85837
(anonymous) @ 0.chunk.js:86369
unbatchedUpdates @ 0.chunk.js:82852
legacyRenderSubtreeIntoContainer @ 0.chunk.js:86368
render @ 0.chunk.js:86451
(anonymous) @ main.chunk.js:1301
./src/index.js @ main.chunk.js:1376
__webpack_require__ @ bundle.js:852
fn @ bundle.js:151
1 @ main.chunk.js:2488
__webpack_require__ @ bundle.js:852
checkDeferredModules @ bundle.js:46
webpackJsonpCallback @ bundle.js:33
(anonymous) @ main.chunk.js:1
0.chunk.js:83683 Uncaught TypeError: Cannot destructure property 'getPosts' of 'data' as it is undefined.
    at Home (main.chunk.js:1427)
    at renderWithHooks (0.chunk.js:75555)
    at mountIndeterminateComponent (0.chunk.js:78317)
    at beginWork (0.chunk.js:79516)
    at HTMLUnknownElement.callCallback (0.chunk.js:64505)
    at Object.invokeGuardedCallbackDev (0.chunk.js:64554)
    at invokeGuardedCallback (0.chunk.js:64614)
    at beginWork$1 (0.chunk.js:84356)
    at performUnitOfWork (0.chunk.js:83192)
    at workLoopSync (0.chunk.js:83129)
    at renderRootSync (0.chunk.js:83095)
    at performSyncWorkOnRoot (0.chunk.js:82712)
    at scheduleUpdateOnFiber (0.chunk.js:82300)
    at updateContainer (0.chunk.js:85837)
    at 0.chunk.js:86369
    at unbatchedUpdates (0.chunk.js:82852)
    at legacyRenderSubtreeIntoContainer (0.chunk.js:86368)
    at Object.render (0.chunk.js:86451)
    at Module.<anonymous> (main.chunk.js:1301)
    at Module../src/index.js (main.chunk.js:1376)
    at __webpack_require__ (bundle.js:852)
    at fn (bundle.js:151)
    at Object.1 (main.chunk.js:2488)
    at __webpack_require__ (bundle.js:852)
    at checkDeferredModules (bundle.js:46)
    at Array.webpackJsonpCallback [as push] (bundle.js:33)
    at main.chunk.js:1

请让我知道问题所在

推荐答案

我正在做相同的教程，我遇到了相同的问题。 通过这样编写，可以更容易地发现错误！

  const { data, loading, error } = useQuery(FETCH_POSTS_QUERY);
  if(data) {
    var { getPosts: posts } = data;
  }
  if(error) {
    console.log(error);
    return "error";
  }

``

 {loading && <h1>Loading ..</h1>}
 {data && (
   {posts &&
    posts.map((post) => (
     <Grid.Column key={post.id} style={{ marginBottom: 20 }}>
       <PostCard post={post} />
     </Grid.Column>
   ))}
   )}

这篇关于仅当在浏览器中刷新页面时，数据在Apollo客户端的用户查询中才变得未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆