@loadup/apollo-query-data-wrapper
Conditional rendering wrapper for Apollo's Query component
Install
npm install --save @loadup/apollo-query-data-wrapper
Usage
Instead of manually checking the loading, error, and success conditions, we'll use the ApolloQueryDataWrapper
to abstract that layer and perform conditional rendering for us.
Query
Use the Wrapper inside a Apollo import React, { Component } from 'react'
import { Query } from 'react-apollo'
import { gql } from 'apollo-boost'
import ApolloQueryDataWrapper from '@loadup/apollo-query-data-wrapper'
const query = gql`
query UserProfile($id: ID!) {
user(id: $id) {
email
firstName
id
lastName
}
}
`
class WrapperExample extends Component {
render () {
return (
<Query query={query} variables={{ id: 1 }}>
{all => (
<ApolloQueryDataWrapper
{...all}
DataComponent={({ data }) => <UserProfile user={data.user} />}
ErrorComponent={({ error }) => <h1>{error.message}</h1>}
LoadingComponent={() => <SuperCuteLoader />}
/>
)}
</Query>
)
}
}
export default WrapperExample
License
MIT © Loadup Technologies