GraphQL mit Reagieren Router Relay: Erwarteter Typ Int, String für numerische Route gefunden

Question

Ich habe folgende Router und Routen mit dem react-router-relay Paket

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

Mein Speichertyp aus GraphQL wie folgt aussieht, mit dem Benutzerfeld zu akzeptieren ein ID-Argument einen nicht-null-Ganzzahl, die:

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 Behälter für die 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; 

Wenn ich besuchen/user/1 im Browser, reagieren-Router-Relais behandelt :userId als String aus der Route statt einer ganzen Zahl und GraphQL gibt die JSON-codierte Fehlermeldung "Argument \"id\" has invalid value \"1\".\nExpected type \"Int\", found \"1\"."

Gibt es eine So können Sie das in der URL übergebene userId-Argument in eine Ganzzahl umwandeln Oder gibt es einen benutzerdefinierten GraphQL-Skalartyp, der wohlgeformte numerische Strings sowie Ganzzahlen unterstützt? Jede Eingabe oder Richtung wird geschätzt.

Answer 1

ich mit dem gleichen Problem vor kurzem konfrontiert und mit dieser Lösung endete:

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