Ошибка типа: Не удается прочитать свойства неопределенного с помощью reactjs и graphql

#reactjs #mongodb #graphql #apollo

#реагирует на #mongodb #graphql #аполлон

Вопрос:

Я создаю социальные сети с помощью RactJS, Мангуста, GraphQL и Apollo. Когда я пытаюсь извлечь данные из базы данных для отображения на домашней странице, я получаю сообщение об ошибке типа Ошибка: Не удается прочитать свойства неопределенных (чтение «getPosts»). Я искал решение и перепробовал кучу вещей, но ничего не сработало

Структура файла

клиент

—-node_модули

—-публичные

—-src

——компоненты

———MenuBar.js

———PostCard.js

——страницы

———Home.js

GraphQL

—-решатели

———comments.js

———index.js

———posts.js

———users.js

—-typeDefs.js

модели

—-Post.js

—-User.js

Home.js

 import React from 'react'; import { useQuery } from '@apollo/react-hooks'; import gql from 'graphql-tag'; import { Grid } from 'semantic-ui-react';   import PostCard from '../components/PostCard';  function Home() {  const { loading, data: { getPosts: posts } } = useQuery(FETCH_POSTS_QUERY);   return (  lt;Grid columns={3}gt;  lt;Grid.Rowgt;  lt;h1gt;Recent Postslt;/h1gt;  lt;/Grid.Rowgt;  lt;Grid.Rowgt;  {loading ? (  lt;h1gt;Loading posts..lt;/h1gt;  ) : (  posts amp;amp; posts.map(post =gt; (  lt;Grid.Column key={post.id}gt;  lt;PostCard post={post} /gt;  lt;/Grid.Columngt;  ))  )}  lt;/Grid.Rowgt;  lt;/Gridgt;  ) }  const FETCH_POSTS_QUERY = gql`  {  getPosts{  id  body  createdAt  username  likeCount  likes {  username  }  commentCount  comments{  id  username  createdAt  body  }  }  } `;  export default Home;  

posts.js

 const { AuthenticationError, UserInputError } = require('apollo-server');  const Post = require('../../models/Post'); const checkAuth = require('../../util/check-auth');  module.exports = {  Query: {  async getPosts() {  try {  const posts = await Post.find().sort({ createdAt: -1 });  return posts;  } catch (err) {  throw new Error(err);  }  },  async getPost(_, { postId }) {  try {  const post = await Post.findById(postId);   if(post) {  return post;  } else {  throw new Error('Post not found')  }  } catch (err) {  throw new Error(err);  }  }  },  Mutation: {  async createPost(_, { body }, context) {  const user = checkAuth(context);      if(args.body.trim() === '') {  throw new Error('Post body must not be empty');  }   const newPost = new Post({  body,  user: user.id,  username: user.username,  createdAt: new Date().toISOString()  });  const post = await newPost.save();   context.pubsub.publish('NEW_POST', {  newPost: post  });   return post;  },  async deletePost(_, { postId }, context) {  const user = checkAuth(context);   try {  const post = await Post.findById(postId);  if(user.username === post.username) {  await post.delete();  return 'Post deleted successfully';  } else {  throw new AuthenticationError('Action not allowed');  }  } catch (err) {  throw new Error(err);  }  },  async likePost(_, { postId }, context) {  const { username } = checkAuth(context);    const post = await Post.findById(postId);  if (post) {  if (post.likes.find((like) =gt; like.username === username)) {  // Post already likes, unlike it  post.likes = post.likes.filter((like) =gt; like.username !== username);  } else {  // Not liked, like post  post.likes.push({  username,  createdAt: new Date().toISOString()  });  }    await post.save();  return post;  } else throw new UserInputError('Post not found');  }  },  Subscription: {  newPost: {  subscribe: (_, __, { pubsub }) =gt; pubsub.asyncIterator('NEW_POST')  }  } }  

Когда я console.log(данные) перед реализацией данных: {getPosts: сообщения}, он работал плавно, возвращая объект, как и ожидалось, но после этого приложение вышло из строя.

Комментарии:

1. потерянный if(loading) return lt;Loading /gt; … читать документы

2. Из функции docs Hello() { const { загрузка, ошибка, данные } = Запрос на использование(GET_GREETING, { переменные: { язык: ‘английский’ }, }); если (загрузка) возвращает lt;pgt;Загрузка …lt;pgt;lt;/pgt;; возвращает lt;/pgt;lt;h1gt;Привет {данные.приветствие.сообщение}!lt;h1gt;lt;/h1gt;; У меня есть загрузка

3. Кстати, я попробовал пример с документами и все равно получил ту же ошибку

Ответ №1:

может быть, попробуем это:

 const { loading, data } = useQuery(FETCH_POSTS_QUERY) const { getPosts: posts } = {...data}  

Дайте мне знать, если это все еще не работает, оставьте комментарий ниже.