react-relay

What is react-relay?

React Relay is a JavaScript framework for building data-driven React applications. It allows you to declaratively fetch data and manage it in a way that is tightly integrated with your React components. Relay is designed to work with GraphQL, a query language for APIs, and it helps in optimizing data fetching and updating the UI efficiently.

What are react-relay's main functionalities?

Declarative Data Fetching

This feature allows you to declaratively fetch data using GraphQL queries. The `QueryRenderer` component is used to fetch data and render the UI based on the fetched data.

```javascript
import React from 'react';
import { QueryRenderer, graphql } from 'react-relay';
import environment from './environment';

const App = () => (
  <QueryRenderer
    environment={environment}
    query={graphql`
      query AppQuery {
        viewer {
          id
          name
        }
      }
    `}
    render={({ error, props }) => {
      if (error) {
        return <div>Error: {error.message}</div>;
      }
      if (!props) {
        return <div>Loading...</div>;
      }
      return <div>User: {props.viewer.name}</div>;
    }}
  />
);

export default App;
```

Fragment Containers

Fragment Containers allow you to co-locate data dependencies with your React components. This means you can specify the data a component needs using GraphQL fragments, and Relay will ensure that the data is fetched and passed to the component.

```javascript
import React from 'react';
import { createFragmentContainer, graphql } from 'react-relay';

const UserComponent = ({ user }) => (
  <div>
    <h1>{user.name}</h1>
    <p>{user.email}</p>
  </div>
);

export default createFragmentContainer(UserComponent, {
  user: graphql`
    fragment UserComponent_user on User {
      name
      email
    }
  `,
});
```

Mutations

Mutations in Relay allow you to modify data on the server and update the client-side store. The `commitMutation` function is used to send a mutation to the server and handle the response.

```javascript
import { commitMutation, graphql } from 'react-relay';
import environment from './environment';

const mutation = graphql`
  mutation AddUserMutation($input: AddUserInput!) {
    addUser(input: $input) {
      user {
        id
        name
      }
    }
  }
`;

function addUser(name) {
  const variables = {
    input: {
      name,
    },
  };

  commitMutation(environment, {
    mutation,
    variables,
    onCompleted: (response, errors) => {
      console.log('Response received from server.', response, errors);
    },
    onError: err => console.error(err),
  });
}
```

Other packages similar to react-relay

apollo-client

Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. It is similar to Relay in that it allows you to fetch and manage data in a declarative way, but it is more flexible and easier to set up. Apollo Client also has a larger community and more extensive documentation.

urql

urql is a highly customizable and versatile GraphQL client for React. It is designed to be lightweight and modular, allowing you to add only the features you need. urql is similar to Relay in that it provides tools for fetching and managing GraphQL data, but it is more focused on simplicity and ease of use.

README

React APIs for Relay

This package contains a collection of React APIs: Hooks and Components that are integrated with Relay runtime.

Example:

// @flow

import type {UserComponent_user$key} from 'UserComponent_user.graphql';

const React = require('react');

const {graphql, useFragment} = require('react-relay');

type Props = {
  user: UserComponent_user$key,
};

function UserComponent(props: Props) {
  const data = useFragment(
    graphql`
      fragment UserComponent_user on User {
        name
        profile_picture(scale: 2) {
          uri
        }
      }
    `,
    props.user,
  );

  return (
    <>
      <h1>{data.name}</h1>
      <div>
        <img src={data.profile_picture?.uri} />
      </div>
    </>
  );
}

For complete API reference, visit https://relay.dev/.