https://github.com/abhiaiyer91/recompose-apollo

Recompose HOCs for React Apollo
https://github.com/abhiaiyer91/recompose-apollo

apollo-client graphql react-apollo

Last synced: 24 days ago
JSON representation

Recompose HOCs for React Apollo

• Host: GitHub
• URL: https://github.com/abhiaiyer91/recompose-apollo
• Owner: abhiaiyer91
• Created: 2018-01-15T00:28:51.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T02:48:03.000Z (11 months ago)
• Last Synced: 2024-10-04T10:20:06.472Z (about 1 month ago)
• Topics: apollo-client, graphql, react-apollo
• Language: JavaScript
• Size: 43 KB
• Stars: 36
• Watchers: 7
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Recompose Apollo

a utility belt for higher-order components in `apollo`. Recompose utilities for `react-apollo`.

## Higher-order components

### `withQueryData()`

```js

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()`

```js

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

```js

const CitiesQuery = withQueryComponent(cityQuery);

function Sample() {

  return (

    

      {

        (data) => {

          return (

            
 I am loading {data.loading ? 'Yes' : 'No'} 

          );

        }

      }

    

  );

}

```


### `withFragment()`

```js

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()`

```js

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()`

```js

withLoadingState(

  Component: Function,

): HigherOrderComponent

```

Render a Component if the `networkStatus` from `apollo-client` is loading, otherwise return props for `networkStatus`:

* `activelyRefetching`

* `passivelyRefetching`

* `fetchingMore`

### `withErrorState()`

```js

withErrorState(

  Component: Function,

): HigherOrderComponent

```

Render a Component if the `networkStatus` from `apollo-client` is `error`.