带有 React Router Relay 的 GraphQL：预期类型 Int，找到数字路由的 String

Posted 2023-03-08

【中文标题】带有 React Router Relay 的 GraphQL：预期类型 Int，找到数字路由的 String

【英文标题】：GraphQL with React Router Relay: Expected type Int, found String for numeric route

【发布时间】：2016-11-12 16:49:22

【问题描述】：

我有以下路由器和使用react-router-relay 包的路由

ReactDOM.render(
    <Router
        history=browserHistory
        render=applyRouterMiddleware(useRelay)
        environment=Relay.Store
    >
            <Route
                path="/user/:userId"
                component=User
                queries=StoreQueries
            />   
    </Router>,
    document.getElementById('root')
);

来自 GraphQL 的我的 StoreType 如下所示，用户字段接受表示非空整数的 id 参数：

let StoreType = new GraphQLObjectType(
    name: 'Store',
    fields: () => (
        user: 
            type: UserType,
            args: 
                id: 
                    type: new GraphQLNonNull(GraphQLInt)
                
            ,
            resolve: (root, args) => db.user.findById(args.id)
        ,
    )
)

user/:userId 路由的我的中继容器：

import React from 'react';
import Relay from 'react-relay'


class User extends React.Component 
    render () 
        return <div>
            User goes here!
        </div>;
    


User = Relay.createContainer(User, 
    initialVariables: 
        userId: null,
    ,

    fragments: 
        store: () => Relay.QL`
            fragment on Store 
                user(id: $userId) 
                    name
                
            
        `
    
);

export default User;

当我在浏览器中访问 /user/1 时，react-router-relay 将 :userId 视为来自路由的字符串而不是整数，GraphQL 返回 JSON 编码的错误消息 "Argument \"id\" has invalid value \"1\".\nExpected type \"Int\", found \"1\"."

有没有办法将 URL 中传递的 userId 参数转换为整数？或者是否有支持格式良好的数字字符串和整数的自定义 GraphQL 标量类型？对此的任何意见或方向表示赞赏。

【参考方案1】：

我最近遇到了同样的问题，最终得到了这个解决方案：

<Route
            path="/user/:userId"
            component=User
            queries=StoreQueries
            prepareParams=(userId) => (userId: parseInt(userId, 10))/>
        /> 

【讨论】：

这就是我最终要做的。这仍然是 v4 中的最佳解决方案吗？有点烂……