当前位置: 首页 > 知识库问答 >
问题:

带有React路由器中继的GraphQL:应为Int类型,找到数字路由的字符串

漆雕修德
2023-03-14

我有以下路由器和路由使用反应路由器中继包

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

GraphQL中的My 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-中继将: userId视为路由中的字符串而不是整数,并且GraphQL返回JSON编码的错误消息"Argument\"id\"的值无效\"1\"。\n预期类型\"Int\",找到\"1\"。"

有没有办法将URL中传递的userId参数转换为整数?或者是否有支持格式良好的数字字符串和整数的自定义GraphQL标量类型?欢迎对此提供任何意见或指导。

共有1个答案

魏英勋
2023-03-14

我最近遇到了同样的问题,最终得到了以下解决方案:

<Route
            path="/user/:userId"
            component={User}
            queries={StoreQueries}
            prepareParams={({userId}) => ({userId: parseInt(userId, 10)})}/>
        /> 
 类似资料:
  • 考虑以下事项: 我有一个应用模板,一个HeaderTemboard,和参数化的路由集与相同的处理程序(在应用模板)。我希望在没有找到东西的时候能够服务404路线。例如, /CA/SanFrancisco应该由区域查找和处理,而 /SanFranciscoz应该是404。 下面是我如何快速测试路线的。 问题是 /SanFranciscoz总是由区域页面处理,但我希望它是404。此外,如果我向第一个路

  • 使用redux和反应路由器,我想访问路由指定的组件以外的组件上的路由参数。 我已经对react-router、redux和react-router-redux进行了如下设置,我想从我的redux存储访问reportId参数。 我已经尝试连接react-redux路由器来存储路由状态,但是我发现除了活动路由的完整路径之外,redux内部没有任何有用的存储。这让我可以选择从redux中的路径解析出re

  • 如果我将路由折叠起来,这样看起来就像: 工作很好。我嵌套的原因是因为我将在“dashboard”下有多个子项,并且希望它们都在URL中以为前缀。

  • 在以下React应用程序中,有两个路由URLhttp://myapp 正确布线到布局构件。但是,URLhttp://myapp/login 也路由到布局组件,而不是登录。如果我将path=“/login”更改为“/sign”,它将正确路由到登录组件。 React路由器中的“/login”路径将其路由到路由是否有特殊之处?或者我设置这个路由的方式有错误吗?

  • 我遇到了一个问题,当使用相同的根查询在两个相邻的react-router-中继路由组件中请求数据时,第二个路由组件中的graph ql服务器查询使先前从第一个路由组件中检索到的数据无效。 例如: 我正在使用一种解决方法将字段附加到“查看器”根节点,以便从根字段查询数据数组: 我的schema.js包括查看器(用户)类型和根的以下定义: 和根: 现在,在main.jsx应用切入点中,我定义了以下路线

  • 我在想这样的事情: 前台有一个不同的布局和风格与管理区域。所以在frontpage中的路由是home、about等等,其中一个应该是子路由。 /home应该呈现到Frontpage组件中,而/admin/home应该呈现在后端组件中。 最终解决方案: 这是我现在使用的最终解决方案。这个例子也像传统的404页面一样有一个全局错误组件。