@loadup/apollo-query-data-wrapper
v1.0.1
Published
Conditional rendering wrapper for Apollo's Query component
Downloads
4
Readme
@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.
Use the Wrapper inside a Apollo Query
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