Fix-Home-JS-classed-React GraphQL App (MERNG): #3 Displaying Posts

fix-home.js

import React from 'react'
import { useQuery } from '@apollo/react-hooks'
import gql from 'graphql-tag'
import { Grid, Divider } from 'semantic-ui-react'

import PostCard from '../components/PostCard'
function Home() {
  let posts = ''
  const { loading, data } = useQuery(FETCH_POSTS_QUERY)

  console.log(`Loading: ${loading}`)
  console.log(data)

  if (data) {
    posts = { data: data.getPosts }
  }
  return (
    <Grid columns={3}>
      <Grid.Row className="page-title">
        <h1>Recent Posts</h1>
      </Grid.Row>
      {loading ? (
        <h1>Loading posts..</h1>
      ) : (
        posts.data &&
        posts.data.map(post => (
          <Grid.Column key={post.id} style={{ marginBottom: 20 }}>
            <PostCard post={post} />
          </Grid.Column>
        ))
      )}
      <Grid.Row></Grid.Row>
    </Grid>
  )
}

const FETCH_POSTS_QUERY = gql`
  {
    getPosts {
      id
      body
      createdAt
      username
      likeCount
      likes {
        username
      }
      commentCount
      comments {
        id
        username
        createdAt
        body
      }
    }
  }
`

export default Home

thanks a lot sir, worked perfectly!

thanks man

It worked, thank you!

i have no word !!!! how can i appreciate your work...thanks man!

Thank you!

thanks mate 👍

It doesn't work for me.

Expected an assignment or function call and instead saw an expression no-unused-expressions

I notice that when I make a change to the react code, save and the auto refresh does not display the posts properly.

As soon as I manually refresh it loads properly. Any idea why this would be the case?

when console.log(error) i get:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/. (Reason: CORS request did not succeed).
OPTIONS http://localhost:5000/ net::ERR_CONNECTION_REFUSED
Home.js:11 Error: Network error: Failed to fetch

Should I just not care and move on with the tutorial? Thoughts? Thank you for your time.

Cheers mate!

thank you. helped break the stalemate.