How to use the react-apollo.useMutation function in react-apollo

const QuizTaker = () => {
  const { quizId } = useParams();
  const history = useHistory();

  // Yes, this is a lot of state...
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
  const [phase, setPhase] = useState(phases.CONCEPTS);
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
  const [currentQuestionCompleted, setCurrentQuestionCompleted] = useState(false);
  const [quiz, setQuiz] = useState(null);
  const [randomizedQuestions, setRandomizedQuestions] = useState(null);
  const [quizAttempt, setQuizAttempt] = useState(null);
  const [isCompleted, setIsCompleted] = useState(false);

  const [startMutation] = useMutation(START_MUTATION);
  const [completeMutation] = useMutation(COMPLETE_MUTATION);

  // Sends the completeQuiz mutation and displays if grade postback was successful or not (if applicable)
  const completeQuiz = async quizAttemptId => {
    setIsLoading(true);
    try {
      // Pass the quiz attempt ID to be completed
      const result = await completeMutation({ variables: { quizAttemptId } });
      console.log(result);

      // A QuizGradePayload contains isGraded (bool!), postSucceeded (bool), error (string), and quizAttempt (quizAttempt!)
      const quizGradePayload = result.data.completeQuizAttempt;

      // If it was graded, check if the LTI grade passback was successful or not
      if (quizGradePayload.isGraded && quizGradePayload.postSucceeded) {
        ButterToast.raise({

const QuizJSONImportModal = ({ quizId, onClose }) => {
  const [isImporting, setIsImporting] = useState(false);
  const { handleSubmit, register } = useForm();
  const [saveQuizMutation] = useMutation(SAVE_QUIZ_MUTATION);

  // Update the quiz with the new questions
  const importJSON = async ({ jsonInput }) => {
    setIsImporting(true);
    try {
      // Parse with JSON5 to be more lenient about non-quoted property names, trailing commas, etc.
      const questionData = JSON5.parse(jsonInput.replace(/\r?\n|\r/g, ''));
      // Send the mutation
      const result = await saveQuizMutation({
        variables: {
          id: quizId,
          data: { questions: { create: questionData } },
        },
      });
      if (result.errors && result.errors.length > 0) {
        throw result.errors[0];

const CourseDetails = () => {
  const { courseId } = useParams();
  const history = useHistory();

  const [displayLtiSetupAction, setDisplayLtiSetupAction] = useState(null);
  const [displayLtiSetupObjectId, setDisplayLtiSetupObjectId] = useState(null);
  const [displayCourseInfoForm, setDisplayCourseInfoForm] = useState(false);

  const courseScores = useCourseScores(courseId);

  const { error, data, refetch } = useQuery(COURSE_QUERY, {
    fetchPolicy: 'cache-and-network',
    variables: { id: courseId },
  });

  const [createQuizMutation] = useMutation(CREATE_QUIZ);

  const createQuiz = async () => {
    try {
      const result = await createQuizMutation({ variables: { courseId } });
      history.push(`/instructor/quiz/${result.data.createQuiz.id}`);
    } catch (err) {
      ButterToast.raise({
        content: ,
        timeout: 3000,
      });
    }
  };

  // Shows the LTI setup modal dialog for a given quiz/dashboard/survey launch
  const showLTISetup = (action, objectId) => {
    // Hide tooltip from quiz actions menu so it doesn't show over modal overlay

const SurveyTaker = () => {
  const { courseId } = useParams();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isComplete, setIsComplete] = useState(false);
  const [answers, setAnswers] = useState({});

  const { loading, error, data: course } = useQuery(COURSE_QUERY, { variables: { id: courseId } });
  const [submitSurveyMutation] = useMutation(SUBMIT_SURVEY);

  // Submit the survey results
  async function submitSurvey() {
    // Prevent re-submission while loading
    if (isSubmitting) {
      return;
    }
    setIsSubmitting(true);
    try {
      await submitSurveyMutation({
        variables: {
          courseId,
          answers,
        },
      });
      setIsComplete(true);

const Records = () => {
  const {data, loading} = useQueryAndSubscription(
    {query: QUERY},
    {query: SUBSCRIPTION},
  );
  const [selectedTemplate, setSelectedTemplate] = React.useState(null);
  const [selectedRecord, setSelectedRecord] = React.useState(null);

  const [addTemplate] = useMutation(ADD_TEMPLATE);
  const [removeTemplate] = useMutation(REMOVE_TEMPLATE, {
    variables: {id: selectedTemplate},
  });
  const [renameTemplate] = useMutation(RENAME_TEMPLATE);
  if (loading || !data) return "Loading...";
  const {recordTemplates} = data;

  const templateObj = recordTemplates.find(r => r.id === selectedTemplate);
  const recordObj =
    templateObj && templateObj.records.find(r => r.id === selectedRecord);

  function updateRecord(id, values) {}
  return (
    
      <h3>Record Snippet Templates</h3>
      <div>
        <div></div></div>

formik.setValues(
        {
          name: data.result.name,
          labels: data.result.labels || [],
          advertiseAddress: data.result.advertiseAddress,
        },
        true
      )
    },
    onError: () => {
      toast.error('Error fetching host details')
      navigate('/ui/hosts/')
    },
  })

  const [updateHost, updateHostMutation] = useMutation(UPDATE_HOST, {
    variables: { id: urlParams.hostId, ...formik.values },
    onCompleted: () => {
      toast.success('Host updated')
      getHostQuery.refetch()
    },
    onError: () => {
      toast.error('Error updating host')
      navigate('/ui/hosts/')
    },
  })

  useEffect(() => {
    getHostQuery.refetch()
  }, [location])

  const handleSaveButtonClick = () => {

const AdminActionButtons = ({ comment, isConversationRoot, onDelete, onEdit }) => {
  const [isDeleting, setDeleting] = React.useState(null);
  const [deleteComment, { error: deleteError }] = useMutation(deleteCommentMutation, mutationOptions);

  return (
    
      {/** Buttons */}
      
        
        
      
       setDeleting(true)} ml={2}>
        
        
      
      {/** Confirm Modals */}
      {isDeleting && (

const Records = () => {
  const {data, loading} = useQueryAndSubscription(
    {query: QUERY},
    {query: SUBSCRIPTION},
  );
  const [selectedTemplate, setSelectedTemplate] = React.useState(null);
  const [selectedRecord, setSelectedRecord] = React.useState(null);

  const [addTemplate] = useMutation(ADD_TEMPLATE);
  const [removeTemplate] = useMutation(REMOVE_TEMPLATE, {
    variables: {id: selectedTemplate},
  });
  const [renameTemplate] = useMutation(RENAME_TEMPLATE);
  if (loading || !data) return "Loading...";
  const {recordTemplates} = data;

  const templateObj = recordTemplates.find(r => r.id === selectedTemplate);
  const recordObj =
    templateObj && templateObj.records.find(r => r.id === selectedRecord);

  function updateRecord(id, values) {}
  return (
    
      <h3>Record Snippet Templates</h3>
      <div></div>