Rails + GraphQL and React

// Default imports
// Same as before
import { ApolloProvider } from 'react-apollo'
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'

// Custom Imports
// Same as before

const link = createHttpLink({ uri: 'http://localhost:5000/graphql' })
const client = new ApolloClient({ link: link, cache: new InMemoryCache() })

// Making `App` as a child for ApolloProvider
// and passing client props to it
ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
)

// Some other code

// Default imports
import React from 'react'
import { useQuery } from 'react-apollo'
import { gql } from 'apollo-boost'

// Custom imports
import '../App.css'
import Polls from './Polls'
import reactLogo from '../assets/react-logo.svg'

// GraphQL query to get polls, choices and the number of votes
const GET_POLLS = gql`
{
  polls {
    id
    question
    choices {
      choiceText
      voteCount
    }
  }
}
`

const App = () => {
  // Note: Anything starting with useXXX is always a hook

  // Calling the useQuery hook of react-apollo, and observe that
  // we have configured the graphql settings once in index,js.
  // We don't need to configure it again in the entire app
  const { loading, error, data } = useQuery(GET_POLLS)

  if (loading) return 'Loading...'
  if (error) return `Error :  ${error.message}`

  return (
    <div className='app'>
      <header className='header'>
        <img src={reactLogo} className='logo' alt='React Logo' />
        <h1 className='name'>Polls API</h1>
      </header>
      <main className='main'>
        {/*
          Here we are mapping the data as react-polls has different
          variable naming when compared to our Polls API

          To avoid this, we can use graphql aliases, which changes
          our query to the following below.

          This is done intentionally to explain this concept of aliasing
          as many developers think that they have to change the backend
          to fit accordingly, which actually we can just use alias.

          {
            polls {
              question: question
              answers: choices {
                option: choiceText
                vootes: voteCount
              }
            }
          }

         */}
        <Polls polls={data.polls.map(
          poll => {
            return {
              id: poll.id,
              question: poll.question,
              answers: poll.choices.map(choice => {
                return {
                  option: choice.choiceText,
                  votes: choice.voteCount,
                  id: choice.id
                }
              })
            }
          }
        )}
        />
      </main>
    </div>
  )
}

export default App

import React, { useState, useEffect } from 'react'
import Poll from 'react-polls'

const Polls = ({ polls }) => {
  const [pollData, updatePollData] = useState([])

  // Some custom style for the polling box
  // More on this can be found here => https://github.com/viniciusmeneses/react-polls#customize
  const pollStyles = {
    questionSeparator: true,
    questionSeparatorWidth: 'question',
    questionBold: true,
    questionColor: '#303030',
    align: 'center',
    theme: 'cyan'
  }

  // Replacing ComponentDidMount, ComponentDidUpdate and ComponentDidUnmount
  // And runs only when the polls are updated (the array in the end with `polls`)

  // More on useEffect hook => https://reactjs.org/docs/hooks-effect.html
  useEffect(() => {
    updatePollData(polls)
  }, [polls])

  // Simple onClick method used to handle Voting
  // This is a pseudo method, i.e. it just updates the
  // state of pollData and not the actual data on server
  const handleVote = (voteAnswer, pollNumber) => {
    const newPollData = [...pollData]

    // Increment no. of votes on the choice clicked
    newPollData.map(poll => (
      poll.id === pollNumber ? poll.answers.map(answer => (answer.option === voteAnswer ? answer.votes++ : null)) : null
    ))

    // Here we can implement a mutation to update the vote
    // made by particular user

    // state hook to update pollData
    updatePollData(newPollData)
  }

  // Renders Poll which is from the package `react-polls`
  return (
    pollData.map(
      poll => (
        <div key={poll.id}>
          <div>
            <Poll
              question={poll.question}
              answers={poll.answers}
              onVote={voteAnswer => handleVote(voteAnswer, poll.id)}
              customStyles={pollStyles} noStorage
            />
          </div>
        </div>
      )
    )
  )
}

export default Polls