Using Apollo Client for global state management code samples - src/AnotherThing/index.tsx

src_AnotherThing_index.tsx

// ./src/AnotherThing/index.tsx
import React from "react";

import { BalloonPickerThatHasAllOfTheNeededLogicInItButForSomeReasonRequiresMeToPassAMutation } from "../Balloon/Picker";
import {
 useGetSelectedBalloonLocalQuery,
 useGetBalloonsQuery,
 useSetSelectedBalloonLocalMutation,
} from "../types/graphql";

const AnotherThing: React.FC = () => {
 useGetBalloonsQuery();
 const { data: localData } = useGetSelectedBalloonLocalQuery();
 const [setSelectedBalloon] = useSetSelectedBalloonLocalMutation();

 return (
   <>
     <span>
       You've selected the {localData?.selectedBalloon?.color} balloon!
     </span>
     <BalloonPickerThatHasAllOfTheNeededLogicInItButForSomeReasonRequiresMeToPassAMutation
       onClick={setSelectedBalloon}
     />
   </>
 );
};

export default AnotherThing;