optimistic-ui-react-apollo-tweets-list.js

import React from 'react'
import { gql, useQuery } from '@apollo/client'

const GET_TWEETS = gql`
  query {
    tweets {
      id
      text
      is_liked
    }
  }
`

function Tweets() {
  const { data, loading } = useQuery(GET_TWEETS)

  if (loading) {
    return (
      <p>Loading tweets...</p>
    )
  }

  const tweets = data?.tweets || []

  return (
    <ul className="tweets">
      {tweets.map(tweet => (
        <li key={tweet.id}>
          <p>{tweet.text}</p>
          <footer>
            ...
            <LikeTweet tweetId={tweet.id} isLiked={tweet.is_liked} />
            ...
          </footer>
        </li>
      ))}
    </ul>
  )
}