https://github.com/nicolaslopezj/react-apollo-decorators

Better decorators for Apollo and React
https://github.com/nicolaslopezj/react-apollo-decorators

apollo decorators fragments graphql mutations react

Last synced: 4 days ago
JSON representation

Better decorators for Apollo and React

• Host: GitHub
• URL: https://github.com/nicolaslopezj/react-apollo-decorators
• Owner: nicolaslopezj
• License: mit
• Created: 2016-10-12T15:01:49.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-10-30T19:30:19.000Z (about 6 years ago)
• Last Synced: 2024-11-01T18:51:31.496Z (11 days ago)
• Topics: apollo, decorators, fragments, graphql, mutations, react
• Language: JavaScript
• Size: 254 KB
• Stars: 39
• Watchers: 3
• Forks: 6
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# React Apollo Decorators

Better decorators for Apollo and React.

[![npm version](https://badge.fury.io/js/react-apollo-decorators.svg)](https://badge.fury.io/js/react-apollo-decorators)

[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)

3 decorators that work on top of Apollo default decorator and make you code in a more *declarative* way.

### ```@withGraphQL(query, options)```

Use this decorator to make GraphQL ```query```.

Differences with apollo's ```graphql``` decorator:

- Props will be directly passed to query variables (filtering which are not present in the query).

- Instead of getting the result of the query in the ```data``` prop of the component, you get each query variable as a prop.

- The component will not be rendered until the query is loaded, instead it will show a Loading screen.

#### Usage

```js

import withGraphQL from 'react-apollo-decorators/lib/withGraphQL'

```

- **query**: GraphQL document containing the query.

- **options**:

  - **loading**: Loading component. Set to null to render the component when the query hasn't finish loading.

  - Other options of apollo's ```graphql``` decorator.

### ```@withMutation(mutation, options)```

Use this decorator to make GraphQL ```mutation```.

Differences with apollo's ```graphql``` decorator:

- Instead of getting the mutation in the ```mutate``` prop, you get it as the name you gave it.

- The first argument of the ```mutate``` function are the variables, the seconds are the options.

- The result of the mutation is return as directly in the function, not inside the data prop.

#### Usage

```js

import withMutation from 'react-apollo-decorators/lib/withMutation'

```

- **mutation**: GraphQL document containing the mutation.

- **options**: Options of apollo's ```graphql``` decorator.

### ```@dynamicQuery(getQuery, options)```

Use this decorator to make queries that change with props.

#### Usage

```js

import dynamicQuery from 'react-apollo-decorators/lib/dynamicQuery'

```

- **getQuery**: A function that returns a GraphQL query in string format (not parsed).

- **options**: Options of apollo's ```graphql``` decorator.