Post.js

import React from 'react'
import { useQuery } from '@apollo/react-hooks'
import gql from 'graphql-tag'
import {
  SinglePage,
  PageHeading,
  PageContent,
} from '@styled/single-page'

const pageQuery = gql`
  query($first: Int, $where: RootQueryToPageConnectionWhereArgs!) {
    pages(first: $first, where: $where) {
      edges {
        node {
          id
          title
          content
        }
      }
    }
  }
`

const Page = ({ name: { name } }) => {
  const { loading, error, data } = useQuery(pageQuery, {
    variables: {
      first: 1,
      where: { name },
    }
  })

  if (loading) return (<p>Loading...</p>)
  if (error) return (<p>Error...</p>)
  if (data) return [
    data.pages.edges.map(({node}) => {
      return node && (
        <SinglePage key={node.id} my={4} px={4}>
          <PageHeading color={`black`} fontWeight={`500`} fontSize={[36, 24, 12]} my={2}>
            {node.title}
          </PageHeading>
          <PageContent dangerouslySetInnerHTML={{ __html: node.content }} />
        </SinglePage>
      )
    })
  ]
}

export { Page }

Sage.js

import React from 'react'
import { WPGraphQL } from './graph/WPGraphQL'
import { useRoutes } from 'hookrouter'
import { ThemeProvider } from 'styled-components'
import theme from '@styled/theme'
import { Page, Post } from '@components'

const Sage = () => {
  const routes = {
    '/blog/:name/': name => <Post name={name} />,
    '/:name/': name => <Page name={name} />,
  }

  const Routes = () => {
    const routeResult = useRoutes(routes)
    return routeResult || <div>No route found.</div>
  }
  return (
    <WPGraphQL>
      <ThemeProvider theme={theme}>
        <Routes />
      </ThemeProvider>
    </WPGraphQL>
  )
}

export default Sage

WPGraphQL.js

import React, { Component } from 'react'
import { ApolloClient } from 'apollo-client'
import { ApolloProvider } from 'react-apollo'
import { withClientState } from 'apollo-link-state'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { persistCache } from 'apollo-cache-persist'
import { ApolloLink } from 'apollo-link'
import { HttpLink } from 'apollo-link-http'
import { onError } from 'apollo-link-error'

const { protocol, hostname, port } = window.location,
      server   = `${protocol}//${hostname}${port==3000 ? `:${port}` : null}/graphql`,
      cache    = new InMemoryCache({}),
      storage  = window.localStorage,
      httpLink = new HttpLink({
        uri: server,
        credentials: 'include'
      })

class WPGraphQL extends Component {
  constructor() {
    super()

    this.state = {
      client: null,
      loaded: false,
    }
  }

  async componentDidMount() {
    const client  = new ApolloClient({
      link: ApolloLink.from([
        onError(({ graphQLErrors, networkError }) => {
          if (graphQLErrors) {
            console.log(graphQLErrors)
          }
          if (networkError) {
            console.log(networkError)
          }
        }),
        withClientState({
          defaults: {
            isConnected: true,
          },
          resolvers: {
            Mutation: {
              updateNetworkStatus: (_, { isConnected }, { cache }) => {
                cache.writeData({ data: { isConnected } })
                return null
              },
            },
          },
          cache,
        }),
        httpLink
      ]),
      cache,
    })

    try {
      await persistCache({
        cache,
        storage,
      })
    } catch (error) {
      console.error('Error restoring Apollo cache', error)
    }

    this.setState({
      client,
      loaded: true,
    })
  }

  render() {
    const { client, loaded } = this.state

    if (!loaded) {
      return <div>Loading...</div>
    }

    return (
      <ApolloProvider client={client}>
        {this.props.children}
      </ApolloProvider>
    )
  }
}

export { WPGraphQL }