React with GraphQL

Use GraphQL for efficient data fetching.

Install Apollo Client

```bash npm install @apollo/client graphql ```

Setup

```javascript import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const client = new ApolloClient({ uri: 'https://api.example.com/graphql', cache: new InMemoryCache() });

function App() { return ( <ApolloProvider client={client}> <Users /> </ApolloProvider> ); } ```

Query Data

```javascript import { useQuery, gql } from '@apollo/client';

const GET_USERS = gql` query GetUsers { users { id name email } } `;

function Users() { const { loading, error, data } = useQuery(GET_USERS);

if (loading) return <p>Loading...</p>; if (error) return <p>Error: {error.message}</p>;

return ( <div> {data.users.map(user => ( <p key={user.id}>{user.name}</p> ))} </div> ); } ```

Mutation

```javascript import { useMutation, gql } from '@apollo/client';

const CREATE_USER = gql` mutation CreateUser($name: String!, $email: String!) { createUser(name: $name, email: $email) { id name } } `;

function CreateUser() { const [createUser] = useMutation(CREATE_USER);

const handleSubmit = () => { createUser({ variables: { name: 'John', email: 'john@example.com' } }); };

return <button onClick={handleSubmit}>Create</button>; } ```

Remember

- Fetch only needed data - Strong typing - Real-time subscriptions - Caching built-in

> Next: Learn testing advanced!