#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}
Дайте мне знать, если это все еще не работает, оставьте комментарий ниже.