15. Exercise: Increase likes on a track
2m

Goal: Increase the number of likes on a track after clicking a button.

  1. Open up the src/components/likes.js file.

  2. Import useMutation and gql from the @apollo/client package.

    import {useMutation, gql} from '@apollo/client';
  3. Create a variable called LIKE_TRACK, paste in the mutation we built in Sandbox, wrapped in the gql tag.

    const LIKE_TRACK = gql`
    mutation LikeTrack($trackId: ID!) {
    likeTrack(trackId: $trackId) {
    success
    track {
    id
    numberOfLikes
    }
    }
    }
    `;
  4. Inside the Likes component, we'll use the useMutation hook, passing in the LIKE_TRACK mutation as the first argument. This mutation needs variables, so we'll also set the variables property to an object with trackId, set to the value of id (which is coming from the component's props).

    Finally, from the result of the useMutation hook, we'll destructure the first element of the tuple and call it likeTrackMutate.

    export default function Likes({numberOfLikes, id}) {
    const [likeTrackMutate] = useMutation(LIKE_TRACK, {
    variables: {trackId: id}
    });
    }
  5. Set the onClick handler of the LikeButton component to call the likeTrackMutate function.

    <LikeButton
    onClick={likeTrackMutate}
    >

Check your work

Hmmmmm, clicking on the Like button doesn't seem to be changing anything in the UI. But if we look at our Network tab, we can see the mutation is being sent successfully, and we're getting data back. So what's happening?

There is an intentional bug here, so take some time to troubleshoot what's going on. Keep in mind what you learned in the last section about "Schema changes in the client", the read function and the @client directive.

Take your time to see if you can figure out what's happening, before moving on to the solution below.

Fixing the bug

  1. In the src/pages/track.js file, remove the @client directive from the GET_TRACK_DETAILS query.

    src/pages/track.js
    - numberOfLikes @client
    + numberOfLikes
  2. In the src/index.js file, remove the type policies we defined in the InMemoryCache constructor. (Or comment it out, if you want to refer to it again later!)

    src/index.js
    const client = new ApolloClient({
    uri: 'https://workshop-catstronauts-api.herokuapp.com/',
    cache: new InMemoryCache({});
Previous