Как использовать GraphQL с React?react-81

npm install @apollo/client graphql

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

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

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

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

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

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

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

  return (
    <ul>
      {data.users.map((user) => (
        <li key={user.id}>{user.name} ({user.email})</li>
      ))}
    </ul>
  );
}

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

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

function AddUserForm() {
  const [createUser, { data, loading, error }] = useMutation(CREATE_USER);
  const [formState, setFormState] = useState({ name: '', email: '' });

  const handleSubmit = (e) => {
    e.preventDefault();
    createUser({ variables: formState });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={formState.name}
        onChange={(e) => setFormState({...formState, name: e.target.value})}
      />
      <input
        value={formState.email}
        onChange={(e) => setFormState({...formState, email: e.target.value})}
      />
      <button type="submit">Add User</button>
    </form>
  );
}

import { useSubscription, gql } from '@apollo/client';

const USER_ADDED = gql`
  subscription OnUserAdded {
    userAdded {
      id
      name
    }
  }
`;

function UserSubscription() {
  const { data, loading } = useSubscription(USER_ADDED);

  return (
    <div>
      <h3>New user: {!loading && data?.userAdded.name}</h3>
    </div>
  );
}

fragment UserDetails on User {
  id
  name
  avatarUrl
  friendsCount
}

new ApolloClient({
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          users: {
            merge(existing = [], incoming) {
              return [...existing, ...incoming];
            }
          }
        }
      }
    }
  })
})

const GET_LOCAL_STATE = gql`
  query GetLocalState {
    isLoggedIn @client
  }
`;

// В мутации:
const client = useApolloClient();
client.writeQuery({
  query: GET_LOCAL_STATE,
  data: { isLoggedIn: true },
});