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

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

javascript reactjs graphql

Javascript 只有在浏览器中刷新页面时，apollo客户端的usequery中的数据才会变得未定义,javascript,reactjs,graphql,react-apollo,apollo-client,Javascript,Reactjs,Graphql,React Apollo,Apollo Client,以下代码在热加载react应用程序时起作用。但当我按下刷新按钮（或按F5）时，应用程序崩溃，表示数据未定义我已经尝试过获取缓存策略，每个策略 gql游乐场和apollo客户端devtools中没有错误。查询工作正常 import React, { useContext } from 'react'; import { useQuery } from '@apollo/client'; import { Grid } from 'semantic-ui-react'; import PostCa

以下代码在热加载react应用程序时起作用。但当我按下刷新按钮（或按F5）时，应用程序崩溃，表示数据未定义

我已经尝试过获取缓存策略，每个策略 gql游乐场和apollo客户端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;

这就是错误所在

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

main.chunk.js:1427未捕获类型错误：无法对“数据”的属性“getPosts”进行解构，因为它未定义。
在家（main.chunk.js:1427）
在renderWithHooks（0.chunk.js:75555）
在mountIndeterminateComponent处（0.chunk.js:78317）
开始工作时（0.chunk.js:79516）
在HtmlUnknowneElement.callCallback（0.chunk.js:64505）
在Object.invokeGuardedCallbackDev（0.chunk.js:64554）
在invokeGuardedCallback（0.chunk.js:64614）
开始工作时$1（0.chunk.js:84356）
执行工作时（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）
在0.chunk.js:86369
在未分段更新时（0.chunk.js:82852）
在legacyRenderSubtreeIntoContainer（0.chunk.js:86368）
在Object.render（0.chunk.js:86451）
在模块上。（main.chunk.js:1301）
在Module../src/index.js（main.chunk.js:1376）
at\uuuuuuuu网页需要（bundle.js:852）
在fn（bundle.js:151）
在Object.1（main.chunk.js:2488）
at\uuuuuuuu网页需要（bundle.js:852）
在checkDeferredModules（bundle.js:46）
在Array.webpackJsonpCallback[作为推送]（bundle.js:33）
在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
performsyncworkroot@0.chunk.js:82712
scheduleUpdateOnFiber@0.chunk.js:82300
updateContainer@0.chunk.js:85837
（匿名）@0.chunk.js:86369
unbatchedUpdates@0.chunk.js:82852
legacyRenderSubtreeIntoContainer@0.chunk.js:86368
render@0.chunk.js:86451
（匿名）@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
（匿名）@main.chunk.js:1
0.chunk.js:88061组件中发生上述错误：
在家里(http://localhost:3000/static/js/main.chunk.js:1420:63)
在途中(http://localhost:3000/static/js/0.chunk.js:90932:29)
在div
集装箱(http://localhost:3000/static/js/0.chunk.js:102737:24)
at路由器(http://localhost:3000/static/js/0.chunk.js:90567:30)
在BrowserRouter(http://localhost:3000/static/js/0.chunk.js:90187:35)
在AuthProvider(http://localhost:3000/static/js/main.chunk.js:1161:85)
应用程序
在阿波罗(http://localhost:3000/static/js/0.chunk.js:6087:19)
考虑将错误边界添加到树中以自定义错误处理行为。
参观https://reactjs.org/link/error-boundaries 了解有关错误边界的更多信息。
控制台@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
commitrotimpl@0.chunk.js:83563
不稳定的_runWithPriority@0.chunk.js:96350
runWithPriority$1@0.chunk.js:71911
commitrot@0.chunk.js:83406
performsyncworkroot@0.chunk.js:82748
scheduleUpdateOnFiber@0.chunk.js:82300
updateContainer@0.chunk.js:85837
（匿名）@0.chunk.js:86369
unbatchedUpdates@0.chunk.js:82852
legacyRenderSubtreeIntoContainer@0.chunk.js:86368
render@0.chunk.js:86451
（匿名）@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
（匿名）@main.chunk.js:1
0.chunk.js:83683 Uncaught TypeError:无法对“data”的属性“getPosts”进行分解，因为它未定义。
在家（main.chunk.js:1427）
在renderWithHooks（0.chunk.js:75555）
在mountIndeterminateComponent处（0.chunk.js:78317）
在beginWork（0.chunk.js:79516）
在HtmlUnknowneElement.callCallback（0.chunk.js:64505）
在Object.invokeGuardedCallbackDev（0.chunk.js:64554）
在invokeGuardedCallback（0.chunk.js:64614）
开始工作时$1（0.chunk.js:84356）
执行工作时（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）
在0.chunk.js:86369
在未分段更新时（0.chunk.js:82852）
在legacyRenderSubtreeIntoContainer（0.chunk.js:86368）
在Object.render（0.chunk.js:86451）
在模块上。（main.chunk.js:1301）
在Module../src/index.js（main.chunk.js:1376）
at\uuuuuuuu网页需要（bundle.js:852）
在fn（bundle.js:151）
在Object.1（main.chunk.js:2488）
at\uuuuuuuu网页需要（bundle.js:852）
在checkDeferredModules（bundle.js:46）
在Array.webpackJsonpCallback[作为推送]（bundle.js:33）
在main.chunk.js:1

请让我知道问题所在

我在做同样的教程，我也有同样的问题。通过这样写，可以更容易地发现bug

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

{loading&&loading..}
{数据&&(
{员额&&
posts.map（（post）=>(
  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>
   ))}
   )}