Come utilizzare GraphQL con Reactjs?

GraphQL è un linguizzo di interrogazione e manipolazione dei dati sviluppato da Facebook. Con GraphQL, puoi inviare richieste per ottenere esattamente ciò di cui hai bisogno, semplificando il processo di ottenere dati da un server a un client.

Per utilizzare GraphQL con React, dovrai seguire i seguenti passaggi:

1. Installa le dipendenze: Innanzitutto, avrai bisogno di alcune dipendenze. Puoi installarle con npm o yarn. Queste includono:

\`\`\`bash npm install apollo-boost

apollo/react-hooks graphql
    \`\`\`
    oppure
    \`\`\`bash
    yarn add apollo-boost

apollo/react-hooks graphql \`\`\`

1. Crea un client Apollo: Appena sopra la root del tuo componente React, dovrai creare un client Apollo e fornire l’URL del tuo endpoint GraphQL.

\`\`\`jsx import ApolloClient from ‘apollo-boost’; const client = new ApolloClient({ uri: ‘https://your-graphql-endpoint’, }); \`\`\` 1. Fornire il client Apollo all’applicazione: Puoi farlo utilizzando il componente ApolloProvider. Tutti i componenti figlio avranno accesso al client Apollo. \`\`\`jsx import { ApolloProvider } from ‘@apollo/react-hooks’; function App() { return ( {/_ The rest of your app goes here _/} ); } \`\`\` 1. Invia le query GraphQL: Puoi usare l’hook useQuery fornito da @apollo/react-hooks per inviare query GraphQL. \`\`\`jsx import { useQuery } from ‘@apollo/react-hooks’; import gql from ‘graphql-tag’; const GET\_DOGS = gql\` { dogs { id breed } } \`; function Dogs() { const { loading, error, data } = useQuery(GET\_DOGS); if (loading) return ‘Loading…’; if (error) return `Error! ${error.message}`; return (

{dog.breed}

); } \`\`\`

1. Invia le mutation GraphQL: Analogamente, puoi usare l’hook useMutation fornito da @apollo/react-hooks per inviare le mutation GraphQL.

\`\`\`jsx import { useMutation } from ‘@apollo/react-hooks’; import gql from ‘graphql-tag’; const ADD\_DOG = gql\` mutation AddDog($breed: String!) { addDog(breed: $breed) { id breed } } \`; function AddDog() { let input; const [addDog, { data }] = useMutation(ADD\_DOG); return (

); } \`\`\`

Quello che abbiamo appena esaminato è un esempio di base di come utilizzare GraphQL con React usando Apollo Client. Naturalmente, c’è molto di più che puoi fare, come l’aggiunta di autenticazione, la gestione degli errori, il caching e altro ancora.