社交登录-如何在功能之外使用变量作出反应？

Question

我尝试使用社交登录。

如果我成功登陆卡考。他们给我access_token，我用它对我的服务器进行变异。

下面是我的代码

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


export default () => {
  const kakaoLoginMutation = useMutation(KAKAO_LOGIN, {
    variables: { provder: "kakao", accessToken: authObj.access_token },
  });

  const kakaoLogin = (e) => {
    e.preventDefault();
    window.Kakao.Auth.login({
      success: function (authObj) {
        console.log(authObj.access_token);
      },
    });
  };
  if (authObj.access_token !== "") {
    kakaoLoginMutation();
  }
  return (
    <a href="#" onClick={kakaoLogin}>
      <h1>카카오로그인</h1>
    </a>
  );
};

如果我成功地使用kakaoLogin函数登录，它就会给出authObj。console.log(authObj.access_token)给我看access_token

我想用它来做useMutation。但在我看来，authObj并没有被定义。

Answer 1

看起来你在寻找一个地方州来控制authObj

const [authObj, setAuthObj] = useState({});

const kakaoLogin = (e) => {
  e.preventDefault();
  window.Kakao.Auth.login({
    success: function(authObj) {
      setAuthObj(authObj);
    },
  });
};

const kakaoLoginMutation = useMutation(KAKAO_LOGIN, {
  variables: {
    provder: "kakao",
    accessToken: authObj.access_token
  },
});

if (authObj.access_token !== "") {
  kakaoLoginMutation();
}

Answer 2

在看了阿波罗博士之后(你读过了，对吧？)应该知道应该使用headers发送令牌。

..。如果使用auth链接并且从localStorage读取令牌..。然后，任何登录函数(突变、请求)结果都应该结束在localStorage中存储令牌(在下一次查询/突变中通过头传递).这应该是显而易见的。

在这种情况下

..。我们的情况有点不同- kakao令牌作为变量被传递到登录突变中.

我们可以简单、直接地(不使用状态、效果、重命名)将kakao令牌传递给‘突变调用者’ (kakaoLoginMutation)：

// mutation definition
const [kakaoLoginMutation] = useMutation(KAKAO_LOGIN);
// event handler
const kakaoLogin = (e) => {
  e.preventDefault();
  window.Kakao.Auth.login({
    success: function(authObj) {
      // run mutation
      kakaoLoginMutation({ 
        variables: {
          provder: "kakao",
          accessToken: authObj.access_token
        }
      })
    },
  });
};

在需要时，可以在(**KAKAO_LOGIN**) onCompleted 处理程序中处理登录突变结果。

const [kakaoLoginMutation] = useMutation(KAKAO_LOGIN, 
  onCompleted = (data) => {
    // save mutation result in localStorage
    // set some state to force rerendering
    // or redirection
  }
);