react-releasy

Built with

Getting Started

Installation

With Yarn:

xxxxxxxxxx
 
yarn add react-releasy
yarn add --dev relay-devtools

or with NPM:

xxxxxxxxxx
 
npm install --save react-releasy
npm install --save-dev relay-devtools

Usage

Using Releasy is quite simple, first we need to create an instance of our Config class:

xxxxxxxxxx
 
import { Config, InMemoryCache, Link } from 'react-releasy';
​
const link = new Link({
  url: 'https://yourserveraddress.com/graphql',
});
​
const cache = new InMemoryCache();
​
const config = new Config({
  link,
  cache,
});

Then we need to wrap the application with a ReleasyProvider:

xxxxxxxxxx
 
import { ReleasyProvider } from 'react-releasy';
​
ReactDOM.render(
  <ReleasyProvider config={config}>
    <MyApplication />
  </ReleasyProvider>,
  document.getElementById('root'),
);

Examples

Let's start making a simple Query:

xxxxxxxxxx
 
import { graphql } from 'react-relay';
import { Query } from 'react-releasy';
​
const MyComponent = () => {
  return (
    <Query
      query={graphql`
        query MyComponentMeQuery {
          me {
            name
          }
        }
      `}
    >
      {({ me, isFetching, error }) => {
        if (error) {
          return `Error: ${error.message}`;
        }
​
        if (isFetching) {
          return 'Loading...';
        }
​
        return `My name is ${me.name}`;
      })}
    </Query>
  );
}

Also, we can commit a mutation using getEnvironment:

xxxxxxxxxx
 
import { graphql, commitMutation } from 'react-relay';
import { getEnvironment } from 'react-releasy';
​
const mutation = graphql`
  mutation ChangeNameMutation($input: ChangeNameInput!) {
    ChangeName(input: $input) {
      me {
        id
        name
      }
    }
  }
`;
​
let tempID = 0;
​
const commit = (name) => {
  return commitMutation(getEnvironment(), {
    mutation,
    variables: {
      input: {
        name,
        clientMutationId: tempID++,
      },
    },
  });
};
​
export default { commit };

All set! You can start to do whatever you want and show to the world the power of Relay.