3

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 は次のようになります。user フィールドは、null 以外の整数を表す 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 スカラー型はありますか? これに関するご意見やご指示をいただければ幸いです。

4

1 に答える 1