react-releasy

Releasy

Relay with zero-configuration.

Installation

With Yarn:

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

or with NPM:

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:

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:

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

Examples

Let's start making a simple Query:

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:

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 };

That's all! You can start to do whatever you want and show to the world the power of Relay.

Documentation

See more documentation here.

License

MIT © Felippe Rodrigo Puhle