How can I use GraphQL with React?

How can I use GraphQL with React?

You can use GraphQL with React by utilizing libraries like Apollo Client or Relay. These libraries help manage data fetching and state.

What are the benefits of using Apollo Client?

Apollo Client simplifies data management, provides caching, and allows for easy integration with React components.

Can you show me a basic example of a GraphQL query in React?

Sure! Here's a simple example using Apollo Client:

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

const GET_DOGS = gql`
  query GetDogs {
    dogs {
      id
      breed
    }
  }
`;

function Dogs() {
  const { loading, error, data } = useQuery(GET_DOGS);

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

  return data.dogs.map(({ id, breed }) => <div key={id}>{breed}</div>);
}

What if I want to use subscriptions with GraphQL?

You can use Apollo Client's support for subscriptions by setting up a WebSocket link. This allows real-time updates in your React app.