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 => me weather _loading _hasError if _loading return <p>Loading...</p>; if _hasError return <p>Error :</p>; return <div> <p>Hello medataname </p> <p> weatherdatatemperature°weatherdataunit</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 => loading error data if _loading return <p>Loading...</p>; if _hasError return <p>Error :</p>; return <div> <p>Hello dataname </p> <Query => loading error data if _loading return <p>Loading...</p>; if _hasError return <p>Error :</p>; return <p> datatemperature°dataunit</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 = ; const Example = <Compose> me followers if meloading || weatherloading return <p>Loading...</p>; if meerror || weathererror return <p>Error :</p>; return <div> <p>Hello medataname </p> <p> weatherdatatemperature°weatherdataunit</p> </div> }} </Compose>;
I use react-adopt in this library and in some case it might fit better your requierement.
License
MIT © [Alexandre Piel]