仅当在浏览器中刷新页面时，数据在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>
))}
)}
相关文章