1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

Better data fetching error handling for Apollo examples (#2227)

* Display data fetching errors in Apollo examples.

* Prevent Apollo GraphQL errors from crashing SSR.

Also tidied a few comments in the vicinity.
This commit is contained in:
Jayden Seric 2017-07-02 07:56:12 +10:00 committed by Tim Neutkens
parent 9bbdfeca63
commit ec2b76f83b
6 changed files with 66 additions and 25 deletions

View file

@ -0,0 +1,13 @@
export default ({message}) => (
<aside>
{message}
<style jsx>{`
aside {
padding: 1.5em;
font-size: 14px;
color: white;
background-color: red;
}
`}</style>
</aside>
)

View file

@ -1,9 +1,11 @@
import { gql, graphql } from 'react-apollo'
import ErrorMessage from './ErrorMessage'
import PostUpvoter from './PostUpvoter'
const POSTS_PER_PAGE = 10
function PostList ({ data: { allPosts, loading, _allPostsMeta }, loadMorePosts }) {
function PostList ({ data: { loading, error, allPosts, _allPostsMeta }, loadMorePosts }) {
if (error) return <ErrorMessage message='Error loading posts.' />
if (allPosts && allPosts.length) {
const areMorePosts = allPosts.length < _allPostsMeta.count
return (

View file

@ -25,23 +25,28 @@ export default ComposedComponent => {
composedInitialProps = await ComposedComponent.getInitialProps(ctx)
}
// Run all graphql queries in the component tree
// Run all GraphQL queries in the component tree
// and extract the resulting data
if (!process.browser) {
const apollo = initApollo()
const redux = initRedux(apollo)
// Provide the `url` prop data in case a graphql query uses it
// Provide the `url` prop data in case a GraphQL query uses it
const url = {query: ctx.query, pathname: ctx.pathname}
// Run all graphql queries
const app = (
try {
// Run all GraphQL queries
await getDataFromTree(
// No need to use the Redux Provider
// because Apollo sets up the store for us
<ApolloProvider client={apollo} store={redux}>
<ComposedComponent url={url} {...composedInitialProps} />
</ApolloProvider>
)
await getDataFromTree(app)
} catch (error) {
// Prevent Apollo Client GraphQL errors from crashing SSR.
// Handle them in components via the data.error prop:
// http://dev.apollodata.com/react/api-queries.html#graphql-query-data-error
}
// Extract query data from the store
const state = redux.getState()
@ -49,7 +54,7 @@ export default ComposedComponent => {
// No need to include other initial Redux state because when it
// initialises on the client-side it'll create it again anyway
serverState = {
apollo: { // Make sure to only include Apollo's data state
apollo: { // Only include the Apollo data state
data: state.apollo.data
}
}

View file

@ -0,0 +1,13 @@
export default ({message}) => (
<aside>
{message}
<style jsx>{`
aside {
padding: 1.5em;
font-size: 14px;
color: white;
background-color: red;
}
`}</style>
</aside>
)

View file

@ -1,9 +1,11 @@
import { gql, graphql } from 'react-apollo'
import ErrorMessage from './ErrorMessage'
import PostUpvoter from './PostUpvoter'
const POSTS_PER_PAGE = 10
function PostList ({ data: { allPosts, loading, _allPostsMeta }, loadMorePosts }) {
function PostList ({ data: { loading, error, allPosts, _allPostsMeta }, loadMorePosts }) {
if (error) return <ErrorMessage message='Error loading posts.' />
if (allPosts && allPosts.length) {
const areMorePosts = allPosts.length < _allPostsMeta.count
return (

View file

@ -24,26 +24,32 @@ export default ComposedComponent => {
composedInitialProps = await ComposedComponent.getInitialProps(ctx)
}
// Run all graphql queries in the component tree
// Run all GraphQL queries in the component tree
// and extract the resulting data
if (!process.browser) {
const apollo = initApollo()
// Provide the `url` prop data in case a graphql query uses it
// Provide the `url` prop data in case a GraphQL query uses it
const url = {query: ctx.query, pathname: ctx.pathname}
// Run all graphql queries
const app = (
try {
// Run all GraphQL queries
await getDataFromTree(
<ApolloProvider client={apollo}>
<ComposedComponent url={url} {...composedInitialProps} />
</ApolloProvider>
)
await getDataFromTree(app)
} catch (error) {
// Prevent Apollo Client GraphQL errors from crashing SSR.
// Handle them in components via the data.error prop:
// http://dev.apollodata.com/react/api-queries.html#graphql-query-data-error
}
// Extract query data from the Apollo's store
// Extract query data from the Apollo store
const state = apollo.getInitialState()
serverState = {
apollo: { // Make sure to only include Apollo's data state
apollo: {
// Only include the Apollo data state
data: state.data
}
}