如何将GraphQL+Relay获取的数据转换为普通React状态？

直接使用useQuery获取数据，将其转换为React本地状态（useState或useReducer）进行修改，后续通过mutation同步到服务端，完全不需要拆分组件或传递PreloadedQuery。

1. 基础实现：用useQuery + useState转换本地状态 #

核心逻辑 #

• 用useQuery直接在组件内获取Relay数据
• 把Relay返回的data.user映射为普通JS对象（替代toLocalState），用useState存为本地状态
• 本地修改直接操作useState，无需和Relay实时同步

import { useQuery, graphql } from 'react-relay';
import { useState, useEffect } from 'react';

// 定义Relay查询
const UserQuery = graphql`
  query UserQuery($userId: ID!) {
    user(id: $userId) {
      id
      name
      email
      avatarUrl
    }
  }
`;

function UserProfile({ userId }) {
  // 用useQuery获取数据
  const { data, error, loading } = useQuery(UserQuery, { userId });
  // 初始化本地状态：Relay数据返回后同步到本地
  const [localUser, setLocalUser] = useState(null);

  useEffect(() => {
    if (data?.user) {
      // 替代toLocalState：直接解构Relay数据为普通对象
      setLocalUser({
        id: data.user.id,
        name: data.user.name,
        email: data.user.email,
        avatarUrl: data.user.avatarUrl,
      });
    }
  }, [data]);

  // 加载/错误状态处理
  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error.message}</div>;
  if (!localUser) return null;

  // 本地修改函数
  const handleNameChange = (e) => {
    setLocalUser(prev => ({ ...prev, name: e.target.value }));
  };

  return (
    <div>
      <h1>{localUser.name}</h1>
      <input
        type="text"
        value={localUser.name}
        onChange={handleNameChange}
        placeholder="修改姓名"
      />
      <p>邮箱：{localUser.email}</p>
      <button onClick={handleSave}>保存到服务器</button>
    </div>
  );
}

2. 复杂状态管理：用useReducer替代useState #

如果用户数据字段多、修改逻辑复杂，用useReducer更易维护：

import { useQuery, graphql } from 'react-relay';
import { useReducer, useEffect } from 'react';

// 状态更新Reducer
function userReducer(state, action) {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return { ...state, [action.field]: action.value };
    case 'RESET_FROM_RELAY':
      return action.user;
    default:
      return state;
  }
}

// 定义查询（同上面的UserQuery）
const UserQuery = graphql`
  query UserQuery($userId: ID!) {
    user(id: $userId) {
      id
      name
      email
      avatarUrl
    }
  }
`;

function UserProfile({ userId }) {
  const { data, error, loading } = useQuery(UserQuery, { userId });
  const [localUser, dispatch] = useReducer(userReducer, null);

  useEffect(() => {
    if (data?.user) {
      dispatch({ type: 'RESET_FROM_RELAY', user: { ...data.user } });
    }
  }, [data]);

  // 加载/错误处理（同上面）
  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error.message}</div>;
  if (!localUser) return null;

  // 本地修改
  const handleNameChange = (e) => {
    dispatch({ type: 'UPDATE_FIELD', field: 'name', value: e.target.value });
  };

  const handleEmailChange = (e) => {
    dispatch({ type: 'UPDATE_FIELD', field: 'email', value: e.target.value });
  };

  // 渲染部分（略）
}

3. 用Mutation同步本地状态到服务端 #

定义Relay Mutation，点击保存时提交本地状态，成功/失败后做对应处理：

import { useMutation, graphql } from 'react-relay';

// 定义更新Mutation
const UpdateUserMutation = graphql`
  mutation UpdateUserMutation($input: UpdateUserInput!) {
    updateUser(input: $input) {
      user {
        id
        name
        email
      }
    }
  }
`;

function UserProfile({ userId }) {
  // ... 之前的useQuery、本地状态代码
  const [commitUpdate] = useMutation(UpdateUserMutation);

  const handleSave = () => {
    commitUpdate({
      variables: {
        input: {
          id: localUser.id,
          name: localUser.name,
          email: localUser.email // 其他需要更新的字段
        }
      },
      onCompleted: () => {
        alert('保存成功');
        // 可选：如果需要强制Relay缓存同步，可在这里触发重新查询
        // 或者依赖Relay自动更新缓存（默认会匹配字段更新）
      },
      onError: (err) => {
        alert('保存失败：' + err.message);
        // 可选：回滚本地状态到Relay原始数据
        if (data?.user) {
          // 用useState的话：setLocalUser({...data.user})
          // 用useReducer的话：dispatch({ type: 'RESET_FROM_RELAY', user: {...data.user} })
        }
      }
    });
  };

  // ... 渲染部分
}

关键注意点 #

• 缓存与本地状态一致性：如果其他地方更新了用户数据，Relay缓存会自动更新，但本地状态不会同步。可通过useEffect监听data变化，自动重置本地状态；或者在Mutation成功后依赖Relay的缓存更新机制。
• 避免过度耦合：组件仅通过userId接收外部参数，Relay的查询和Mutation逻辑封装在组件内部，业务逻辑完全基于本地状态，和Relay的耦合度极低。
• 嵌套数据转换：如果用户数据有嵌套结构（比如address对象），只需要递归解构为普通JS对象即可，无需特殊工具函数。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD