只有在浏览器中刷新页面时，数据才会在apollo客户端的usequery中变为未定义

Question

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

我已经尝试了获取缓存策略，每个人gql游乐场和apollo客户端开发工具中没有错误。查询工作正常。

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_POSTS_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

请让我知道的问题

Answer 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>
))}
)}

Answer 2

您可以通过添加默认值来解决此问题。

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

Answer 3

我也遇到了同样的问题：手动刷新页面后，数据会返回未定义的值。

对我来说，当我在返回组件时添加验证时，更准确地说，当我将数据加载到屏幕之前添加{data&&//…}时，它就起了作用：

const Persons = () => {
const { loading, error, data } = useQuery(getAllPersons);
return (
<div>
{loading && <Loading />}
{error && <p>Something went wrong...</p>}
{data && data.allPersons.map(person => (
<div key={person.name}>
<p>{person.name}</p>
<p>{person.phone}</p>
</div>
))}
</div>
);
};