GraphQL API Integration

Example Code

```javascript
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import App from './App';

// 1. Initialize Apollo Client
// Replace 'https://graphqlzero.almansi.me/api' with your actual GraphQL API endpoint
const client = new ApolloClient({
  uri: 'https://graphqlzero.almansi.me/api',
  cache: new InMemoryCache(),
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* 2. Wrap your application with ApolloProvider to make the client available */}
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>
);


// src/App.js
import React from 'react';
import UsersList from './components/UsersList';
import AddUserForm from './components/AddUserForm';

function App() {
  return (
    <div style={{ fontFamily: 'sans-serif', padding: '20px' }}>
      <h1>GraphQL API Integration with React (Apollo Client)</h1>
      <p>This example demonstrates fetching and modifying data using Apollo Client with a public GraphQL API.</p>
      <hr />
      <AddUserForm />
      <hr />
      <UsersList />
    </div>
  );
}

export default App;


// src/components/UsersList.js
import React from 'react';
import { useQuery, gql } from '@apollo/client';

// 3. Define your GraphQL query using the gql tag
const GET_USERS = gql`
  query GetUsers {
    users(options: { paginate: { limit: 5 } }) {
      data {
        id
        name
        email
      }
    }
  }
`;

function UsersList() {
  // 4. Use the useQuery hook to execute the query
  const { loading, error, data } = useQuery(GET_USERS);

  if (loading) return <p>Loading users...</p>;
  if (error) return <p style={{ color: 'red' }}>Error :({error.message}</p>;

  return (
    <div>
      <h2>Users</h2>
      <ul>
        {data.users.data.map(({ id, name, email }) => (
          <li key={id}>
            <b>{name}</b> ({email})
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UsersList;


// src/components/AddUserForm.js
import React, { useState } from 'react';
import { useMutation, gql } from '@apollo/client';

// 5. Define your GraphQL mutation
const CREATE_USER = gql`
  mutation CreateUser($name: String!, $email: String!) {
    createUser(input: { name: $name, email: $email }) {
      id
      name
      email
    }
  }
`;

// The query used to refetch data after a mutation to update the UI.
// In a more complex app, you might update the cache directly.
const GET_USERS_FOR_REFETCH = gql`
  query GetUsers {
    users(options: { paginate: { limit: 5 } }) {
      data {
        id
        name
        email
      }
    }
  }
`;

function AddUserForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  // 6. Use the useMutation hook
  const [createUser, { data, loading, error }] = useMutation(CREATE_USER, {
    // Refetch the GET_USERS query after a successful mutation
    // This ensures the UsersList component updates with the new user
    refetchQueries: [
      GET_USERS_FOR_REFETCH,
      'GetUsers' // The name of the query defined in GET_USERS_FOR_REFETCH
    ],
  });

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await createUser({ variables: { name, email } });
      setName('');
      setEmail('');
      alert('User created successfully!');
    } catch (err) {
      console.error('Error creating user:', err);
      alert(`Error creating user: ${err.message}`);
    }
  };

  return (
    <div>
      <h2>Add New User</h2>
      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '10px', maxWidth: '300px' }}>
        <div>
          <label style={{ display: 'block', marginBottom: '5px' }}>Name:</label>
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            required
            style={{ width: '100%', padding: '8px' }}
          />
        </div>
        <div>
          <label style={{ display: 'block', marginBottom: '5px' }}>Email:</label>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
            style={{ width: '100%', padding: '8px' }}
          />
        </div>
        <button type="submit" disabled={loading} style={{ padding: '10px', backgroundColor: '#007bff', color: 'white', border: 'none', cursor: 'pointer' }}>
          {loading ? 'Adding...' : 'Add User'}
        </button>
        {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
        {data && <p style={{ color: 'green' }}>User '{data.createUser.name}' added successfully!</p>}
      </form>
    </div>
  );
}

export default AddUserForm;
```