React Native中UseMutation调用GraphQL接口报400错误求助

第一步：获取具体错误信息 #

首先要拿到GraphQL返回的详细错误，而非仅HTTP 400状态码。修改组件代码，捕获并打印错误详情：

import { useMutation, gql } from '@apollo/client';
import { useState, useEffect } from 'react';

// ... 其他代码

const [createUser, { error }] = useMutation(Creat_User);

// 监听错误
useEffect(() => {
  if (error) {
    console.log('📌 GraphQL错误信息:', error.message);
    console.log('📌 错误详情:', error.graphQLErrors);
  }
}, [error]);

const CreationUS = () => {
  console.log('📤 提交的输入值:', { nom, Prenom, Password, Mail, Societe, Numero_Telephone, Role });
  createUser({
    variables: {
      createUserInput: {
        nom,
        password: Password,
        prenom: Prenom,
        mail: Mail,
        // 注意字段名需与后端严格匹配
        numeroTelephone: Numero_Telephone.trim(),
        role: Role,
        societe: Societe
      }
    }
  });
};

打印的graphQLErrors会明确指出错误原因（如字段名不匹配、类型错误），这是排查核心。

常见问题及修复方案 #

1. 字段名/类型名大小写不匹配 #

GraphQL对字段名、类型名大小写严格敏感，这是最常见诱因：

• 输入类型名：后端用@InputType()装饰的类默认是大驼峰（如CreateUserInput），你前端mutation里写的小写开头createUserInput需修正为：

  mutation createUser($createUserInput: CreateUserInput!) {
    createUser(createUserInput: $createUserInput) {
      nom
      password
      prenom
      mail
      numeroTelephone # 此处需与后端字段名一致
      role
      societe
    }
  }
  

• 字段名：NestJS + TypeGraphQL默认将类的小驼峰属性转为GraphQL字段名（如后端DTO里的numeroTelephone），你前端传的Numero_Telephone是大驼峰加下划线，必须改成与后端一致的小驼峰格式。

2. React Native localhost访问问题 #

Android模拟器中localhost指向模拟器自身，而非开发电脑，需将Apollo Client的uri修改为：

const client = new ApolloClient({
  uri: 'http://10.0.2.2:3500/graphql', // Android专用
  // uri: 'http://localhost:3500/graphql', // iOS专用
  cache: new InMemoryCache(),
});

3. 输入值不符合后端校验规则 #

• 检查字段类型匹配：比如Numero_Telephone若为数字类型，你传的带空格字符串"Empty Numero_Telephone "会触发错误，需确保输入值类型与后端定义一致。
• 枚举字段校验：若role是枚举类型，你传的"Empty Role"不在枚举范围内，也会导致400错误。

4. useMutation调用变量名混淆 #

你之前将useMutation返回的第一个值命名为data，易与返回的data对象混淆，建议改为语义化命名createUser，避免后续逻辑出错。

验证方法 #

把前端打印的variables复制到GraphQL Playground的变量区直接执行mutation：

• 若Playground报错，说明变量本身存在问题（如字段名、类型错误）。
• 若Playground正常，再检查Apollo Client的请求配置（如uri、headers）。

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