Hooks Data Flow - rkaku/udemy-graphql-with-react-intro-search-repos GitHub Wiki

App Component Function

Constants

const PER_PAGE

const QUERY_VARIABLES

const [state, setState] = useState(QUERY_VARIABLES)

Methods

const handleChange

const goPrevious

const goNext

Component Functions

Search Query Component < App

const SearchQuery

useQuery from '@apollo/react-hooks'

GRAPHQL from './graphql'

state, setState <= useState <= QUERY_VARIABLES <- App

goPrevious <= PER_PAGE <- App

goNext <= PER_PAGE <- App

Star Count Component < Search Query Component < App

const StarCount

useMutation from '@apollo/react-hooks'

state <- Search Query Component <- App

node <- Search Query Component < App

Search Mutation Component < Star Count Component < App

const SearchMutaion

import { SEARCH_REPOSITORIES, ADD_STAR, REMOVE_STAR } from './graphql'

viewerHadStarred <- node <- Star Count Component <- Search Query Component < App

state <- Star Count Component < App

Star Status Component < Search Mutation Component < Star Count Component < App

const StarStatus

addOrRemoveStar <- Search Mutation Component <- Star Count Component < Search Query Component < App

node <- Star Count Component < App

App Component

Apollo Provider Component

Search Form

Search Results Component