Comment utiliser GraphQL avec Reactjs ?

GraphQL est un langage d’interrogation de données open-source développé par Facebook qui vous permet de demander exactement ce dont vous avez besoin et rien d’autre. Il s’intègre très bien avec n’importe quelle application React et apporte une approche plus efficace pour gérer les données en comparaison avec les méthodes traditionnelles de RESTful Services.

Pour utiliser GraphQL avec React, vous pouvez suivre les étapes suivantes :

1. Installation des dépendances : Vous devez installer Apollo Client, qui se connecte à votre API GraphQL. Vous pouvez installer apollo-boost, react-apollo et graphql via npm :

```
npm install apollo-boost react-apollo graphql
```

1. Connexion à l’API GraphQL : Créez un client Apollo et passez l’URL de votre API GraphQL :

```
import ApolloClient from “apollo-boost”;

const client = new ApolloClient({ uri: “https://your-graphql-endpoint“
});
```

1. Intégration d’Apollo dans React : Intégrez votre instance cliente Apollo dans votre application React en utilisant le fournisseur Apollo :

```
import { ApolloProvider } from “react-apollo”;

function App() { return (

My React App

);
}
```

1. Requêtes GraphQL : Vous pouvez maintenant faire des requêtes GraphQL dans vos composants React. Utilisez le composant Query de react-apollo pour cela :

```
import { Query } from “react-apollo”;
import gql from “graphql-tag”;

const MyComponent = () => ( {({ loading, error, data }) => { if (loading) return

Loading…

; if (error) return

Error :(

;

return data.allUsers.edges.map(({ node }) => (

{node.firstName}

)); }} ); ```

1. Mutations GraphQL : Pour modifier des données, vous utilisez des mutations GraphQL. Utilisez le composant Mutation de react-apollo pour cela :

```
import { Mutation } from “react-apollo”;
import gql from “graphql-tag”;

const UPDATE_USER = gql` mutation UpdateUser($firstName: String!) { updateUser(firstName: $firstName) { id firstName } }
`;

const UpdateUserComponent = () => ( {(updateUser, { data }) => (

)}
);
```

Et voilà ! Vous avez maintenant une configuration de base pour utiliser GraphQL avec React. La requête récupère des données et la mutation modifie des données. Vous pouvez également exploiter d’autres fonctionnalités telles que le cache, les variables et la pagination.