在React中如何调用RPC？使用React Query调用是否存在差异？

• 核心设计逻辑：RPC是面向方法的，调用远程服务的具体函数和调用本地方法逻辑一致，无需关心HTTP方法、资源定位规则，参数直接传递给目标方法即可；REST是面向资源的，依靠HTTP方法（GET/POST/PUT/DELETE）+ URL路径定义对资源的操作；GraphQL是面向查询的，客户端主动声明需要的字段结构，单次请求可聚合多个资源的数据。
• 请求约束：RPC的请求格式、参数规则完全由服务端定义的方法约定，没有统一通用规范，不同RPC框架（gRPC、Thrift、JSON-RPC）的实现规则差异很大；REST要求严格遵循HTTP语义、资源定位规范；GraphQL有统一的查询语法规范，所有请求默认走同一个endpoint。
• 适用场景：RPC适合内部服务通信、对性能延迟要求高的场景；REST适合对外公开的API、资源类操作场景；GraphQL适合前端需要灵活定制返回字段、多资源聚合的场景。

前端场景最常用的是JSON-RPC协议，发送请求的逻辑和普通HTTP请求一致，只需要按照RPC协议规范构造参数即可：

POST方式（最常用） #

// 调用RPC的getUserInfo方法，传参userId=123
fetch('https://your-rpc-server-endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    jsonrpc: '2.0', // JSON-RPC协议固定版本字段
    method: 'getUserInfo', // 要调用的RPC方法名，必填
    params: { userId: 123 }, // 方法对应入参
    id: 1, // 请求唯一标识，用于匹配对应响应
  })
})
.then(res => res.json())
.then(data => console.log(data.result))

GET方式 #

GET请求只需把所有RPC参数作为查询参数拼接在URL后即可：

const rpcParams = new URLSearchParams({
  jsonrpc: '2.0',
  method: 'getUserInfo',
  params: JSON.stringify({ userId: 123 }),
  id: 1
})
fetch(`https://your-rpc-server-endpoint?${rpcParams.toString()}`)
.then(res => res.json())
.then(data => console.log(data.result))

React Query本身只负责请求状态管理、缓存、重试等通用逻辑，和底层使用的请求协议无关，调用RPC和调用REST、GraphQL的逻辑基本没有差异，唯一的区别是需要在queryFn/mutationFn里按照RPC规范构造请求参数即可，示例如下：

import { useQuery } from '@tanstack/react-query'

// 封装RPC getUserInfo的请求逻辑
const fetchUserInfo = async (userId) => {
  const res = await fetch('https://your-rpc-server-endpoint', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      jsonrpc: '2.0',
      method: 'getUserInfo',
      params: { userId },
      id: 1
    })
  })
  const data = await res.json()
  if (data.error) throw new Error(data.error.message)
  return data.result
}

// 组件内调用和REST/GraphQL场景完全一致
function UserProfile({ userId }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['userInfo', userId],
    queryFn: () => fetchUserInfo(userId)
  })

  if (isLoading) return <div>加载中</div>
  if (error) return <div>请求失败：{error.message}</div>
  return <div>用户名：{data.userName}</div>
}

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