GraphQL with React Router Relay: Expected type Int, found String for numeric route

Question

I have the following Router and routes using the react-router-relay package

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

My StoreType from GraphQL looks like the following, with the user field accepting an id argument representing a non-null integer:

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

My Relay container for the user/:userId route:

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;

When I visit /user/1 in the browser, react-router-relay treats :userId as a string from the route instead of an integer, and GraphQL returns the JSON-encoded error message "Argument \"id\" has invalid value \"1\".\nExpected type \"Int\", found \"1\"."

Is there any way to cast the userId argument passed in the URL to an integer? Or is there a custom GraphQL scalar type that supports well-formed numeric strings as well as integers? Any input or direction on this is appreciated.

ramusus · Accepted Answer · 2016-11-02 16:51:54Z

1

I faced with the same problem recently and ended up with this solution:

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

answered Nov 2, 2016 at 16:51

ramusus

8,4455 gold badges40 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric D. Fields Over a year ago

That's what I wound up doing. Is this still the best solution in v4? Kinda sucks…

Collectives™ on Stack Overflow

GraphQL with React Router Relay: Expected type Int, found String for numeric route

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related