blocks|key|2764562|text|您需要定义如下的查询操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2764563|export+const+FETCH_POSTS_QUERY+=+gql`
++query+GetPosts+{
++++getPosts+{
++++++//+fields
++++}
++}
`|code-block|syntax|javascript|2764564|或者，您可以使用alias轻松地引用它们。|offset|length|style|CODE|2764565|export+const+FETCH_POSTS_QUERY+=+gql`
++query+GetPosts+{
++++posts:+getPosts+{
++++++//+fields
++++}
++}
`

const+{
++loading,
++data:+{+posts+}+//+uses+alias+directly.+no+need+to+rename
}+=+useQuery(FETCH_POSTS_QUERY);|2764566|entityMap|0|LINK|mutability|MUTABLE|url|https://graphql.org/learn/queries/#aliases^0|0|0|8|5|8|5|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]]|9|@$I|11|J|12|1|13]]|A|$]]|$1|M|3|N|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

You need to define the query operation like:
<pre><code>export const FETCH_POSTS_QUERY = gql`
 query GetPosts {
 getPosts {
 // fields
 }
 }
`
</code></pre>
Alternatively, you can make use of <a href="https://graphql.org/learn/queries/#aliases" rel="nofollow noreferrer"><code>alias</code></a> to easily reference them.
<pre><code>export const FETCH_POSTS_QUERY = gql`
 query GetPosts {
 posts: getPosts {
 // fields
 }
 }
`

const {
 loading,
 data: { posts } // uses alias directly. no need to rename
} = useQuery(FETCH_POSTS_QUERY);
</code></pre>

blocks|key|2764605|text|让调试变得更简单，而不是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2764606|const+{+loading，data：{+getPosts:+posts+}}=+useQuery(FETCH_POSTS_QUERY)；|blockquote|2764607|做：|2764608|const+{+data,+loading,+error+}+=+useQuery(FETCH_POSTS_QUERY);
if(data)+{
++console.log(data);
++const+{+getPosts:+posts+}+=+data;
}
if(error)+{
++console.log(error);
++return+"error";+//+blocks+rendering
}|code-block|syntax|javascript|2764609|这是可行的，但当数据存在时就不行了，而且并不总是这样。|2764610|“不是什么时候的数据”，“不总是”？奇怪..。只有当data存在时才能定义“‘posts”。当未定义将失败时访问它，总是..。你必须检查“数据”|offset|length|style|CODE|2764611|只有在：时才能/应该呈现项(帖子)|BOLD|2764612|!loading|unordered-list-item|2764613|和|2764614|data+!=+undefined+-+if(data)或JSX中的(data+&&
{加载和加载post.}+{data+&(++{post+&&+posts.map((post)+=>+(+++)}+}}}|2764615|entityMap^0|0|0|0|0|0|Q|4|0|0|4|0|0|8|0|0|1|0|0|H|K|8|Y|8|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|16|8|@]|9|@]|A|$]]|$1|E|3|F|5|6|7|17|8|@]|9|@]|A|$]]|$1|G|3|H|5|I|7|18|8|@]|9|@]|A|$J|K]]|$1|L|3|M|5|D|7|19|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1A|8|@$P|1B|Q|1C|R|S]]|9|@]|A|$]]|$1|T|3|U|5|6|7|1D|8|@$P|1E|Q|1F|R|V]]|9|@]|A|$]]|$1|W|3|X|5|Y|7|1G|8|@$P|1H|Q|1I|R|S]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1J|8|@$P|1K|Q|1L|R|V]]|9|@]|A|$]]|$1|11|3|12|5|Y|7|1M|8|@$P|1N|Q|1O|R|S]|$P|1P|Q|1Q|R|S]|$P|1R|Q|1S|R|S]]|9|@]|A|$]]|$1|13|3|-4|5|6|7|1T|8|@]|9|@]|A|$]]]|14|$]]

Make it simpler to debug, instead:
<blockquote>
const {
loading,
data: { getPosts: posts }
} = useQuery(FETCH_POSTS_QUERY);
</blockquote>
do:
<pre><code>const { data, loading, error } = useQuery(FETCH_POSTS_QUERY);
if(data) {
 console.log(data);
 const { getPosts: posts } = data;
}
if(error) {
 console.log(error);
 return &quot;error&quot;; // blocks rendering
}
</code></pre>
<blockquote>
this works but not when data is there and not always
</blockquote>
&quot;not when data&quot;, &quot;not always&quot;??? weird ... 'posts' can be defined only if <code>data</code> exists ... accessing it when undefined will fail, always ... you must check 'data'
You can/should render items (posts) ONLY when:
<ul>
<li><code>!loading</code></li>
</ul>
AND
<ul>
<li><code>data != undefined</code> - <code>if(data)</code> or <code>(data &amp;&amp; </code> in JSX
<pre><code> {loading &amp;&amp; &lt;h1&gt;Loading posts..&lt;/h1&gt;}
 {data &amp;&amp; (
 &lt;Transition.Group&gt;
 {posts &amp;&amp;
 posts.map((post) =&gt; (
 &lt;Grid.Column key={post.id} style={{ marginBottom: 20 }}&gt;
 &lt;PostCard post={post} /&gt;
 &lt;/Grid.Column&gt;
 ))}
 &lt;/Transition.Group&gt;
 )}
</code></pre>
</li>
</ul>

blocks|key|467883|text|这样使用这段代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|467884|const+{+loading，data：{+posts+}=+{}+}=+useQuery(FETCH_POSTS_QUERY)；|467885|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

use this code like this
const { loading, data: { posts } = {} } = useQuery(FETCH_POSTS_QUERY);

blocks|key|467909|text|const+{+loading,+data:+{+getPosts:+posts+}+=+{}+}+=+useQuery(FETCH_POSTS_QUERY)|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|467910|这应该能解决这个问题|unstyled|467911|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>const { loading, data: { getPosts: posts } = {} } = useQuery(FETCH_POSTS_QUERY)
</code></pre>
This should solve the problem

blocks|key|467982|text|这会起作用的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|467983|在网格中写入data.getPosts|467984|const+{+loading，data，error+}=+useQuery(FETCH_POSTS_QUERY)；|467985|如果(错误)返回Error!+${error.message}；|offset|length|style|CODE|467986|++++{loading+?+(<h1>Loading+posts...</h1>)+
++++:+(data.getPosts+&&
++++++data.getPosts.map((post)+=>+(
++++++++<Grid.Column+key={post.id}+style=+{{+marginBottom:+20}}>
++++++++++<PostCard+post={post}+/>
++++++++</Grid.Column>|code-block|syntax|javascript|467987|entityMap^0|0|0|0|8|N|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|V|8|@$H|W|I|X|J|K]]|9|@]|A|$]]|$1|L|3|M|5|N|7|Y|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

THIS WILL WORK
write data.getPosts inside the grid
const { loading ,data , error } = useQuery(FETCH_POSTS_QUERY);
if (error) return <code>Error! ${error.message}</code>;
<pre><code> {loading ? (&lt;h1&gt;Loading posts...&lt;/h1&gt;) 
 : (data.getPosts &amp;&amp;
 data.getPosts.map((post) =&gt; (
 &lt;Grid.Column key={post.id} style= {{ marginBottom: 20}}&gt;
 &lt;PostCard post={post} /&gt;
 &lt;/Grid.Column&gt;
</code></pre>

I did try searching for the same question but all of those were of either angular or unrelated,
I am trying to make a Social app using MongoDB, Express, React, Node, Graphql with Apollo, I am following a video from freecodecamp : <a href="https://www.youtube.com/watch?v=n1mdAPFq2Os" rel="nofollow noreferrer">Link to the video</a>
In that video everything worked fine but in his deployed version he is having the same error as mine
<blockquote>
react_devtools_backend.js:2450 TypeError:
Cannot read property 'getPosts' of undefined
at ae (Home.js:14)
at Jo (react-dom.production.min.js:3274)
</blockquote>
<a href="https://gracious-shannon-271ede.netlify.app/" rel="nofollow noreferrer">link to the deployed app</a>
My Code: I am dropping a link to my github repo containing the whole project : <a href="https://github.com/lorstenoplo/merng-app" rel="nofollow noreferrer">Link to github
repo</a>
Stack Overflow was throwing too many indentation issues so i have linked my github above as there
is too much of code
<ul>
<li>I'm using semantic-ui for styling</li>
<li>I'm using graphql the fetch posts from MongoDB</li>
<li>Apollo Client for rendering data</li>
</ul>
This is the error I am getting in the Home.js:
Screen Shot of the error:
<a href="https://i.stack.imgur.com/oVOIj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oVOIj.png" alt="error screen shot" /></a>

TypeError: Cannot read property 'getPosts' of undefined - useQuery hook, react Functional Components

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我确实尝试过寻找同样的问题，但所有这些都是角的或无关的，我正试图用 MongoDB、Express、React、Node、Graphql和阿波罗制作一个社交应用程序，我正在跟踪freecodecamp的视频：react_devtools_backend.js:2450 TypeError：无法读取未定义的属性“getP...

问TypeError:无法读取未定义- useQuery钩子的属性'getPosts‘，响应功能组件
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问TypeError:无法读取未定义- useQuery钩子的属性'getPosts‘，响应功能组件EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问TypeError:无法读取未定义- useQuery钩子的属性'getPosts‘，响应功能组件
EN