Mutation is not a function?

Question

I want to use social login by using graphql. I want to get accessToken from social login by using kakaologin function and then i use it to make token by using kakakoLoginMutation function.

I try to make const name is access_token(=="123") and if i success to login by kakao, i get accss_token by authObj. and then i set it to const access_token by using setAccess_token(useState).

console.log(authObj.access_token) show correct strings. but after setAccess_token(authObj.access_token), console.log(access_token) show "123".

I think that console.log(access_token) have to show not "123" ohter strings. and the other error is KakaoLoginMutation is not a function.

import { useState } from "react";
import { useMutation } from "react-apollo-hooks";
import { KAKAO_LOGIN, LOCAL_LOG_IN } from "./AuthQuery";


export default () => {
  const [access_token, setAccess_token] = useState("123");
  const localLogInMutation = useMutation(LOCAL_LOG_IN);
  const kakaoLoginMutation = useMutation(KAKAO_LOGIN, {
    variables: { provider: "kakao", accessToken: access_token },
  });

  const kakaoLogin = async (e) => {
    e.preventDefault();
    window.Kakao.Auth.login({
      success: function (authObj) {
        setAccess_token(authObj.access_token);
        console.log(authObj.access_token);
        console.log(access_token);
      },
    });

    const {
      data: { socialAuth: token },
    } = await kakaoLoginMutation();
    console.log(token);
    if (token !== "" && token !== undefined) {
      localLogInMutation({ variables: { token } });
    }
  };

  return (
    <a href="#" onClick={kakaoLogin}>
      <h1>카카오로그인</h1>
    </a>
  );
};

---

Query.js

import { gql } from "apollo-boost";

export const KAKAO_LOGIN = gql`
  mutation SocialAuth($provider: String!, $accessToken: String!) {
    socialAuth(provider: $provider, accessToken: $accessToken) {
      token
    }
  }
`;