无法通过 React 中的查询进行 map

Question

Im using Apollo with React to map over a query but get a TypeError: Cannot read property 'map' of undefined.

I don't know if the passing of props is the problem or the query it self...

I know that the Query is in made of fragments but changing that dose not fix the error.

Here is the code:

App.js

import React from 'react';
import './App.css';

import { Query } from 'react-apollo'
import { gql } from  'apollo-boost'

import ListPosts from './components/ListPosts'

function App() {
  return (
    <Query query={GET_POSTS_QUERY}>
      {(data, loading, error) => {
        if (loading) return <div>loading</div>
        if (error) return <div>error</div>

        return <ListPosts posts={data.allPosts} />

      }}
    </Query>
  )
}

const GET_POSTS_QUERY = gql`
{
  allPosts {
    ... on PostType {
      title
      createdAt
      content
      postImage
      postedBy {
        username
      }
    }
    ... on Post2Type {
      title
      createdAt
      content
      postImage
      postedBy {
        username
      }
    }
  }
}

`

export default App;

ListPosts.js

import React from "react";

const ListPosts = ({ posts }) => (
    <div>
        {posts.map(post => (
            <div key={post.id}>
                <h1>{post.title}</h1>
            </div>
        ))}
    </div>
)

export default ListPosts;

For more context here is the response in JSON

{
  "data": {
    "allPosts": [
      {
        "title": "vesti",
        "createdAt": "2020-04-05T12:37:09.451520+00:00",
        "content": "<p><strong>asdasda</strong></p>",
        "postImage": "post/logo.png",
        "postedBy": {
          "username": "filip"
        }
      },
      {
        "title": "asds",
        "createdAt": "2020-04-05T17:44:11.291829+00:00",
        "content": "<p>asdasd</p>",
        "postImage": "",
        "postedBy": {
          "username": "filip"
        }
      }
    ]

Thank you!

Answer 1

Query Render prop function

The render prop function that you pass to the children prop of Query is called with an object ( QueryResult ) that has the following properties. This object contains your query result, plus some helpful functions for refetching, dynamic polling, and pagination.

In other words, the render prop is a props object with the properties you need. The component is also only passed a single argument.

The entire props was being assigned to a variable named data , and because loading and error are undefined, ie falsey, those conditional tests fail and you try to render the posts. Now, data.allPosts or really props.allPosts doesn't exist.

Using object destructuring you can access the data , loading , and error props.

function App() {
  return (
    <Query query={GET_POSTS_QUERY}>
      {({ data, loading, error }) => {
        if (loading) return <div>loading</div>
        if (error) return <div>error</div>

        return <ListPosts posts={data.allPosts} />

      }}
    </Query>
  )
}

Answer 2

1. your response in JSON isn't the full JSON should be this:

{
  data: {
    allPosts: [
      {
        title: "vesti",
        createdAt: "2020-04-05T12:37:09.451520+00:00",
        content: "<p><strong>asdasda</strong></p>",
        postImage: "post/logo.png",
        postedBy: {
          username: "filip"
        }
      },
      {
        title: "asds",
        createdAt: "2020-04-05T17:44:11.291829+00:00",
        content: "<p>asdasd</p>",
        postImage: "",
        postedBy: {
          username: "filip"
        }
      }
    ]
  }
}

2. You are sending your data.allpost which shouldn't be camel case so when you receive it as a prop in ListPost you shouldn't wrap it in an object should be:

const ListPosts = (posts) => (...)

3. If you want to map the object you will have to access the array within the object by Object.entries() or Object.values() so:

Object.entries(posts).map(postArray => (...)

will return [posts:, [array(2)]]

4. Now that you have access to the array you will need to map it like you have:

 postArray[1].map(post => {
 return(
  <div key={post.title}>
          <div style={{ borderStyle: "solid" }}>
            <h3>{post.title}</h3>
          </div>
          <div style={{ borderStyle: "solid", borderWidth: "2px" }}>
            <p>{post.createdAt}</p>
            <p>{post.content}</p>
            <p>{post.postImage}</p>
            <p>{post.postedBy.username}</p>
          </div>
  </div>
  )}

I've created an example of this for you for better understanding here: https://codesandbox.io/s/component-drilling-props-grxm4

Check the console you will be able to see the logs

hope this helps you goodluck!

Answer 3

 import React from "react"; const ListPosts = props => { return ( <div> { props.posts.map(post => { <div key={post.id}> <h1>{post.title}</h1> </div> }); } </div> ); }; export default ListPosts;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React from "react";

const ListPosts = props => (
<div>
    {props.posts.map(post => (
        <div key={post.id}>
            <h1>{post.title}</h1>
        </div>
    ))}
</div>
)

export default ListPosts;

can you do these changes?