Relay és un framework de JavaScript desenvolupat per Facebook que s'utilitza per construir aplicacions React que utilitzen GraphQL. Relay està dissenyat per gestionar de manera eficient les dades de les aplicacions, oferint una experiència d'usuari ràpida i fluida. En aquest tema, explorarem els conceptes bàsics de Relay, com configurar-lo i com utilitzar-lo per fer consultes i mutacions.

1. Introducció a Relay
2. Configuració de Relay
3. Consultes amb Relay
4. Mutacions amb Relay
5. Fragments de Relay
6. Gestió de dades amb Relay Store
7. Exercicis pràctics

Relay és un framework que facilita la gestió de dades en aplicacions React utilitzant GraphQL. Algunes de les característiques clau de Relay són:

• Declaratiu: Defineixes les dades que necessita cada component de manera declarativa.
• Eficiència: Optimitza les consultes per minimitzar la quantitat de dades transferides.
• Consistència: Manté la consistència de les dades a través de la Relay Store.

Per començar a utilitzar Relay en una aplicació React, necessitem configurar-lo. A continuació es mostren els passos bàsics per configurar Relay:

1. Instal·lació de dependències:

   npm install react-relay relay-runtime graphql
   

2. Configuració de l'entorn de compilació:

   Relay necessita un entorn de compilació per processar les consultes GraphQL. Això es fa mitjançant relay-compiler.

   npm install --save-dev relay-compiler babel-plugin-relay
   

   Afegeix el següent a la configuració de Babel (.babelrc):

   {
     "plugins": ["relay"]
   }
   

3. Configuració del Relay Environment:

   Crea un fitxer RelayEnvironment.js per configurar l'entorn de Relay.

   import { Environment, Network, RecordSource, Store } from 'relay-runtime';
   
   function fetchQuery(operation, variables) {
     return fetch('/graphql', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
         query: operation.text,
         variables,
       }),
     }).then(response => response.json());
   }
   
   const environment = new Environment({
     network: Network.create(fetchQuery),
     store: new Store(new RecordSource()),
   });
   
   export default environment;
   

4. Integració amb React:

   Utilitza el RelayEnvironment en la teva aplicació React.

   import React from 'react';
   import ReactDOM from 'react-dom';
   import { RelayEnvironmentProvider } from 'react-relay/hooks';
   import environment from './RelayEnvironment';
   import App from './App';
   
   ReactDOM.render(
     <RelayEnvironmentProvider environment={environment}>
       <App />
     </RelayEnvironmentProvider>,
     document.getElementById('root')
   );
   

Relay utilitza el concepte de fragments per definir les dades que necessita cada component. A continuació es mostra un exemple de com fer una consulta amb Relay:

1. Definició del fragment:

   import { graphql } from 'react-relay';
   
   const userFragment = graphql`
     fragment UserFragment on User {
       id
       name
       email
     }
   `;
   

2. Utilització del fragment en un component:

   import React from 'react';
   import { useFragment } from 'react-relay/hooks';
   import userFragment from './UserFragment';
   
   function UserComponent(props) {
     const data = useFragment(userFragment, props.user);
   
     return (
       <div>
         <h1>{data.name}</h1>
         <p>{data.email}</p>
       </div>
     );
   }
   
   export default UserComponent;
   

Les mutacions en Relay es defineixen de manera similar a les consultes. A continuació es mostra un exemple de com fer una mutació amb Relay:

1. Definició de la mutació:

   import { graphql, commitMutation } from 'react-relay';
   import environment from './RelayEnvironment';
   
   const mutation = graphql`
     mutation AddUserMutation($input: AddUserInput!) {
       addUser(input: $input) {
         user {
           id
           name
           email
         }
       }
     }
   `;
   
   function addUser(input) {
     return commitMutation(environment, {
       mutation,
       variables: { input },
       onCompleted: (response, errors) => {
         console.log('Response received from server.');
       },
       onError: err => console.error(err),
     });
   }
   
   export default addUser;
   

2. Utilització de la mutació en un component:

   import React, { useState } from 'react';
   import addUser from './AddUserMutation';
   
   function AddUserComponent() {
     const [name, setName] = useState('');
     const [email, setEmail] = useState('');
   
     const handleSubmit = (e) => {
       e.preventDefault();
       addUser({ name, email });
     };
   
     return (
       <form onSubmit={handleSubmit}>
         <input
           type="text"
           value={name}
           onChange={(e) => setName(e.target.value)}
           placeholder="Name"
         />
         <input
           type="email"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
           placeholder="Email"
         />
         <button type="submit">Add User</button>
       </form>
     );
   }
   
   export default AddUserComponent;
   

Els fragments són una part essencial de Relay, ja que permeten definir les dades que necessita cada component de manera modular. Això facilita la reutilització i la composició de components.

Relay Store és el lloc on Relay emmagatzema les dades recuperades de les consultes GraphQL. Això permet a Relay mantenir la consistència de les dades i optimitzar les consultes.

1. Configura un nou projecte React amb Relay.
2. Crea un RelayEnvironment i integra'l amb la teva aplicació React.

1. Defineix un fragment per a un tipus User.
2. Utilitza el fragment en un component per mostrar les dades d'un usuari.

1. Defineix una mutació per afegir un nou usuari.
2. Crea un formulari en un component React per afegir un nou usuari utilitzant la mutació.

Solució a l'Exercici 1

Solució a l'Exercici 2

Solució a l'Exercici 3

Relay és una eina poderosa per gestionar dades en aplicacions React utilitzant GraphQL. En aquest tema, hem après a configurar Relay, fer consultes i mutacions, utilitzar fragments i gestionar dades amb Relay Store. Amb aquests coneixements, estàs preparat per començar a construir aplicacions React eficients i escalables amb Relay.