1.0.3 • Published 6 years ago
react-apollo-composer v1.0.3
react-apollo-composer
react apollo composer for queries and mutations
Install
npm install --save react-apollo-composer
yarn add react-apollo-composer --save
Usage
import React from 'react';
import gql from 'graphql-tag';
import Queries from 'react-apollo-composer';
const GET_ME = 'getMe { name }';
const GET_WEATHER = 'getWeather { temperature, unit }';
const Example = () => (
<Queries queries={{ me: GET_ME, weather: GET_WEATHER }}>
{({ me, weather, _loading, _hasError }) => {
if (_loading) return <p>Loading...</p>;
if (_hasError) return <p>Error :(</p>;
return (
<div>
<p>Hello, { me.data.name }</p>
<p>It's {weather.data.temperature}°{weather.data.unit}</p>
</div>
)
}}
</Queries>
);
Property queries is an object that can accept graphql query and mutation. The child element, will be called with the rendered query and mutation, and few extra variable:
- _loading : true if one of the query is loading
- _error : combine all error variable from each query to one array
- _hasError : true if one of the query has an error
Why
Because it is much more cool than:
import React from 'react';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
const GET_ME = 'getMe { name }';
const GET_WEATHER = 'getWeather { temperature, unit }';
const Example = () => (
<Query query={GET_ME}>
{({ loading, error, data }) => {
if (_loading) return <p>Loading...</p>;
if (_hasError) return <p>Error :(</p>;
return (
<div>
<p>Hello, { data.name }</p>
<Query query={GET_WEATHER}>
{({ loading, error, data }) => {
if (_loading) return <p>Loading...</p>;
if (_hasError) return <p>Error :(</p>;
return (
<p>It's {data.temperature}°{data.unit}</p>
)
}}
</Query>
</div>
)
}}
</Query>
);
And easier than (even if react-adopt is super cool):
import React from 'react';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
import { adopt } from 'react-adopt';
const GET_ME = 'getMe { name }';
const GET_WEATHER = 'getWeather { temperature, unit }';
const Compose = adopt({
me: ({ render }) => <Query query={GET_ME}>{render}</Query>,
weather: ({ render }) => <Query query={GET_WEATHER}>{render}</Query>,
});
const Example = () => (
<Compose>
{({ me, followers }) => {
if (me.loading || weather.loading) return <p>Loading...</p>;
if (me.error || weather.error) return <p>Error :(</p>;
return (
<div>
<p>Hello, { me.data.name }</p>
<p>It's {weather.data.temperature}°{weather.data.unit}</p>
</div>
)
}}
</Compose>
);
I use react-adopt in this library and in some case it might fit better your requierement.
License
MIT © Alexandre Piel