React-Apollo Mutation组件将空字符串转为Null的问题排查

我之前也碰到过一模一样的问题——明明状态里存的是合法空字符串，Apollo却悄悄把它转成null发给服务器，直接触发数据库的非空约束报错。下面给你几个靠谱的解决方案，按排查优先级排序：

1. 先检查你的handleChange函数（最可能的根源） #

很多时候问题出在输入框的 onChange 处理逻辑里，比如不小心把空输入转成了null：

// 错误示例：空字符串会被||转为null
handleChange = (e) => {
  const value = e.target.value || null;
  this.setState({ [e.target.name]: value });
}

改成直接保留输入值即可：

// 正确做法：完整保留输入的空字符串
handleChange = (e) => {
  const value = e.target.value;
  this.setState({ [e.target.name]: value });
}

2. 全局配置Apollo Client，禁止变量序列化转换空字符串 #

如果确认状态里确实是空字符串，但Apollo还是转成null，那需要修改Apollo Client的全局配置，让它保留原始变量值。

针对Apollo Client v3：

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';

const httpLink = createHttpLink({
  uri: '/your-graphql-endpoint',
});

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
  defaultOptions: {
    mutate: {
      // 禁用默认变量序列化，保留所有原始值（包括空字符串）
      serializeVariables: (variables) => variables,
    },
  },
});

针对Apollo Client v2：

import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: '/your-graphql-endpoint',
  defaultOptions: {
    mutate: {
      stripNulls: false, // 既不移除null变量，也不会把空字符串转为null
    },
  },
});

3. 单个Mutation单独配置 #

如果不想全局修改，也可以在调用createContact时单独设置选项：

await createContact({
  variables: { name: this.state.name },
  // 针对当前Mutation禁用变量序列化
  serializeVariables: (vars) => vars,
});

验证方法 #

你可以打开浏览器的Network面板，查看GraphQL请求的payload，确认发送的变量是空字符串""而不是null，这样就能确定问题是否解决了。

另外你提到已经通过GraphiQL验证过服务器接受空字符串，只要确保Apollo发送的是真实的空字符串，问题就迎刃而解啦。

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