如何用Apollo Mutation调用GraphQL登录API？登录报错求助

错误根源 #

你犯了两个核心错误：

• 误用useQuery hook执行Mutation操作：useQuery仅用于GraphQL查询（Query）类型的操作，修改类操作必须使用useMutation hook。
• 用query关键字包裹mutation属于语法错误：GraphQL中Query和Mutation是完全独立的操作类型，不能嵌套定义。

正确解决方案 #

1. 保留正确的Mutation语法
   你最初写的Mutation语句是合规的，不需要用query包裹，只需补充指定返回字段（服务器不会默认返回所有字段）：

const LoginMutation = gql`
  mutation {
    login(data: {
      email: "cherineewong@gmail.com",
      password: "Imagine100!"
    }) {
      # 明确指定需要返回的字段，比如登录token、用户信息
      token
      user {
        id
        email
      }
    }
  } 
`;

2. 替换为useMutation hook
   将原来的useQuery换成专门处理Mutation的useMutation，并正确触发操作：

import { useMutation } from '@apollo/client';

// 初始化Mutation hook
const [login, { loading, error, data }] = useMutation(LoginMutation);

// 在登录触发事件中调用（比如按钮点击）
const handleLogin = async () => {
  try {
    const result = await login();
    console.log('登录成功:', result.data);
  } catch (err) {
    console.error('登录失败:', err);
  }
};

// 可直接观察状态
console.log('加载状态:', loading);
console.log('错误信息:', error);
console.log('返回数据:', data);

进阶优化：动态传参 #

不要硬写账号密码，改用变量实现动态传参：

const LoginMutation = gql`
  mutation Login($email: String!, $password: String!) {
    login(data: {
      email: $email,
      password: $password
    }) {
      token
      user {
        id
        email
      }
    }
  } 
`;

// 调用时传入变量
const result = await login({
  variables: {
    email: "cherineewong@gmail.com",
    password: "Imagine100!"
  }
});

内容的提问来源于stack exchange，提问作者Safi