Recompose + Apollo Query component

Looking for some examples/opinions on the best way to strip out repetitive error/loading. This was formally simple with recompose + apollo’s compose function.

I am curious about any clever ways folks have gone about this.

We explored the Query component as well, and I think it makes sense for simple use cases where there is one query wrapping a presentation component. But as soon as you get past that, I think the hoc is definitely the prescribed method.

I think you could write an hoc that wraps <Query> and could accept props that allow you to rename the data variable and strip repetition, but that feels like trading readability for brevity in a way that doesn’t make much sense to me.

Using the graphql hoc and something like this paired with recompose makes for pretty clean and easy to reason about component, I think.

1 Like

to start, i did something like this. its a HOC that handles the default cases (show loading spinner while loading, show error component on error, show component else).

it also spreads the data into the component.

// withDefaultGraphqlResult

import { ActivityIndicator } from 'react-native'
import { branch, compose, renderComponent, withProps } from 'recompose'
import React from 'react'
import styled from 'styled-components/native'

import { graphqlUrl } from '../../../configs/endpoint'
import ErrorComponent from '../components/ErrorComponent'
import LoadingComponent from '../components/LoadingComponent'

export default compose(
    props =>,
    renderComponent(() => <LoadingComponent size="large" />)
    props =>,
    renderComponent(props => <ErrorComponent {...props} />)
  withProps(({ data }) => {
    return data

and you use it like this:

const MyContainer = compose(  
  graphql(gql` .... `),
export default MyContainer

There are some nice libraries that implement the “recompose” paradigms onto render props:

1 Like