How do I use Apollo Hooks in my React application?

How do I use Apollo Hooks in my React application?

You can use Apollo Hooks like useQuery and useMutation to fetch and manipulate data in your React components.

Can you show me an example of using useQuery?

Sure! Here's a simple example:

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}>
      <p>{`${id}: ${breed}`}</p>
    </div>
  ));
}

What about using useMutation for submitting data?

You can use useMutation to handle data submissions. Here's an example:

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

const ADD_DOG = gql`
  mutation AddDog($breed: String!) {
    addDog(breed: $breed) {
      id
      breed
    }
  }
`;

function AddDog() {
  let input;
  const [addDog, { data }] = useMutation(ADD_DOG);

  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault();
        addDog({ variables: { breed: input.value } });
        input.value = '';
      }}>
        <input ref={node => { input = node; }} />
        <button type="submit">Add Dog</button>
      </form>
      {data && <p>Added: {data.addDog.breed}</p>}
    </div>
  );
}