recompose-apollo
v0.3.1
Published
Recompose HOCs utils for Apollo
Downloads
9
Maintainers
Readme
Recompose Apollo
a utility belt for higher-order components in apollo
. Recompose utilities for react-apollo
.
Higher-order components
withQueryData()
withQueryData(
queryDocument: DocumentNode,
optionsObject: { options: (props) => { variables } } | { options: Object }
): HigherOrderComponent
Same functionality as react-apollo
graphql
HOC, except the data
prop or named data prop is flattened.
withQueryComponent()
withQueryComponent(
queryDocument: DocumentNode,
optionsObject: { options: (props) => { variables } } | { options: Object }
): Component
Return a query component given a GraphQL document and options. What's returned is a Component
with a render child
that has the data object from react-apollo
, see below.
Query Components outlined: https://dev-blog.apollodata.com/query-components-with-apollo-ec603188c157
const CitiesQuery = withQueryComponent(cityQuery);
function Sample() {
return (
<CitiesQuery>
{
(data) => {
return (
<p> I am loading {data.loading ? 'Yes' : 'No'} </p>
);
}
}
</CitiesQuery>
);
}
withFragment()
withFragment(
fragmentDocument: DocumentNode,
optionsObject: {
name: string,
getFragmentId: (props) => string,
}
): HigherOrderComponent
After a query has been made with the graphql
HOC, use this HOC to read fragments from the Apollo Client cache. Based on the options name
, the fragment data will be returned to the component as props under that key or data
.
withSubscribe()
withSubscribe(
subscriptionDocument: DocumentNode,
optionsObject: { options: (props) => { variables } }
): HigherOrderComponent
Create a GraphQL subscription that subscribes on componentDidMount
. By providing a
onResult
prop to the Component, every time the subscription yields next
, onResult
will be called with the result of the subscription.
withLoadingState()
withLoadingState(
Component: Function,
): HigherOrderComponent
Render a Component if the networkStatus
from apollo-client
is loading, otherwise return props for networkStatus
:
activelyRefetching
passivelyRefetching
fetchingMore
withErrorState()
withErrorState(
Component: Function,
): HigherOrderComponent
Render a Component if the networkStatus
from apollo-client
is error
.