Recompose + Apollo Query component

apollo
1

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.

https://www.apollographql.com/docs/react/recipes/recompose.html

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

2

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
3

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(
  branch(
    props => props.data.loading,
    renderComponent(() => <LoadingComponent size="large" />)
  ),
  branch(
    props => props.data.error,
    renderComponent(props => <ErrorComponent {...props} />)
  ),
  withProps(({ data }) => {
    return data
  })
)

and you use it like this:


const MyContainer = compose(  
  graphql(gql` .... `),
  withDefaultGraphqlResult,
)(MyComponent)
export default MyContainer
2 Likes
4

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

1 Like