Need Help With React Development?

Work with our skilled React developers to accelerate your project and boost its performance.

Hire Reactjs Developers

Support On Demand!

Apollo in React provides useQuery to fetch GraphQL data and useMutation to execute mutations.

Following is the example of useQuery and useMutation hooks:

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

const GET_CARS = gql`
  query GetCards {
    cars {
      id
      brand
    }
  }
`;

const ADD_CAR = gql`
  mutation AddCar($brand: String!) {
    addCar(brand: $brand) {
      id
      brand
    }
  }
`;

function Cars({ onCarSelected }) {
  const { loading, error, data } = useQuery(GET_CARS);
  const [addCar, otherDetails] = useMutation(ADD_CAR);
  const inputRef = useRef();

  if (loading) return "Loading...";
  if (error) return `Error! ${error.message}`;

  return (
    <div>
      <select name="car" onChange={onCarSelected}>
        {data.cars.map(({ id, brand }) => (
          <option key={id} value={brand}>
            {brand}
          </option>
        ))}
      </select>

      <form
        onSubmit={(e) => {
          e.preventDefault();
          addCar({ variables: { brand: inputRef.current.value } });
          // post details related to mutation like { data, loading, error } can be accessed from otherDetails
        }}
      >
        <input ref={inputRef} />
        <button type="submit">Add Car</button>
      </form>
    </div>
  );
}

Related Q&A