Search code examples
reactjsgraphqlrelayjs

Relay Framework uncaught TypeError: this.props.relay.commitUpdate is not a function

I am learning Relay framework and GraphQL. I am following the tutorial from its official website. In that tutorial, I would build a game using GraphQL mutations. The goal of the game is to find a hidden treasure in a grid of 9 squares. Everything was fine when I run it on the server, but when I did a click action to one of the grid, the app threw an error:

Uncaught TypeError: this.props.relay.commitUpdate is not a function

From the console's log, I could clearly see that there is no commitUpdate() function in this.props.relay, but I got confused since in the Relay's playground, I could see that there is a commitUpdate() function in this.props.relay.

Any thoughts?

%20*%20Copyright%20(c)%202013-present,%20Facebook,%20Inc. %20*%20All%20rights%20reserved. %20* %20*%20This%20source%20code%20is%20licensed%20under%20the%20BSD-style%20license%20found%20in%20the %20*%20LICENSE%20file%20in%20the%20root%20directory%20of%20this%20source%20tree.%20An%20additional%20grant %20*%20of%20patent%20rights%20can%20be%20found%20in%20the%20PATENTS%20file%20in%20the%20same%20directory. %20*/

//%20Welcome%20to%20Relay. //%20Allow%20us%20to%20introduce%20you%20to%20the%20four%20elements.

/** %20*%20#1%20-%20Your%20React%20components %20*%20This%20will%20look%20familiar%20to%20React%20developers. %20* %20*%20To%20learn%20more%20about%20React,%20visit: %20*%20%20https://facebook.github.io/react %20*/ class%20HelloApp%20extends%20React.Component%20{ %20%20_handleClick(){ %20%20%20%20console.log(this.props.relay); %20%20} %20%20renderMain(){ %20%20%20%20const%20{goodbye}%20=%20this.props.greetings; %20%20%20%20return%20<h1%20onClick={this._handleClick.bind(this)}>{goodbye} %20%20} %20%20render()%20{ %20%20%20%20//%20Relay%20will%20materialize%20this%20prop%20based%20on%20the %20%20%20%20//%20result%20of%20the%20query%20in%20the%20next%20component. %20%20%20%20console.log(this.props.greetings); %20%20%20%20const%20{hello}%20=%20this.props.greetings; %20%20%20%20return%20<h1%20onClick={this._handleClick.bind(this)}>{hello}{this.renderMain()}; %20%20} }

/** %20*%20#2%20-%20Relay%20containers %20*%20Compose%20your%20React%20components%20with%20a%20declaration%20of %20*%20the%20GraphQL%20query%20fragments%20that%20fetch%20their%20data. %20* %20*%20To%20learn%20more%20about%20Relay%20containers,%20visit: %20*%20%20%20https://facebook.github.io/relay/docs/guides-containers.html %20*/ HelloApp%20=%20Relay.createContainer(HelloApp,%20{ %20%20fragments:%20{ %20%20%20%20//%20This%20GraphQL%20query%20executes%20against %20%20%20%20//%20the%20schema%20in%20the%20'schema'%20tab%20above. %20%20%20%20// %20%20%20%20//%20To%20learn%20more%20about%20Relay.QL,%20visit: %20%20%20%20//%20%20%20https://facebook.github.io/relay/docs/api-reference-relay-ql.html %20%20%20%20greetings:%20()%20=>%20Relay.QL %20%20%20%20%20%20fragment%20on%20Greetings%20{ %20%20%20%20%20%20%20%20hello, %20%20%20%20%20%20%20%20goodbye, %20%20%20%20%20%20} %20%20%20%20, %20%20} });

/** %20*%20#3%20-%20Relay%20routes %20*%20Define%20a%20root%20GraphQL%20query%20into%20which%20your %20*%20containers'%20query%20fragments%20will%20be%20composed. %20* %20*%20To%20learn%20more%20about%20Relay%20routes,%20visit: %20*%20%20%20https://facebook.github.io/relay/docs/guides-routes.html %20*/ class%20HelloRoute%20extends%20Relay.Route%20{ %20%20static%20routeName%20=%20'Hello';%20%20//%20A%20unique%20name %20%20static%20queries%20=%20{ %20%20%20%20//%20Here,%20we%20compose%20your%20Relay%20container's %20%20%20%20//%20'greetings'%20fragment%20into%20the%20'greetings' %20%20%20%20//%20field%20at%20the%20root%20of%20the%20GraphQL%20schema. %20%20%20%20greetings:%20(Component)%20=>%20Relay.QL %20%20%20%20%20%20query%20GreetingsQuery%20{ %20%20%20%20%20%20%20%20greetings%20{ %20%20%20%20%20%20%20%20%20%20${Component.getFragment('greetings')}, %20%20%20%20%20%20%20%20}, %20%20%20%20%20%20} %20%20%20%20, %20%20}; }

/** %20*%20#4%20-%20Relay%20root%20containers %20*%20Compose%20a%20Relay%20container%20with%20a%20Relay%20route. %20*%20This%20enables%20Relay%20to%20synthesize%20a%20complete%20query %20*%20to%20fetch%20the%20data%20necessary%20to%20render%20your%20app. %20* %20*%20To%20learn%20more%20about%20Relay%20root%20containers,%20visit: %20*%20%20%20https://facebook.github.io/relay/docs/guides-root-container.html %20*/ ReactDOM.render( %20%20<Relay.RootContainer %20%20%20%20Component={HelloApp} %20%20%20%20route={new%20HelloRoute()} %20%20/>, %20%20mountNode ); &schema=/** %20*%20Copyright%20(c)%202013-present,%20Facebook,%20Inc. %20*%20All%20rights%20reserved. %20* %20*%20This%20source%20code%20is%20licensed%20under%20the%20BSD-style%20license%20found%20in%20the %20*%20LICENSE%20file%20in%20the%20root%20directory%20of%20this%20source%20tree.%20An%20additional%20grant %20*%20of%20patent%20rights%20can%20be%20found%20in%20the%20PATENTS%20file%20in%20the%20same%20directory. %20*/

import%20{ %20%20GraphQLObjectType, %20%20GraphQLSchema, %20%20GraphQLString, }%20from%20'graphql';

const%20GREETINGS%20=%20{ %20%20hello:%20'Hello', %20%20goodbye:%20'Goodbye' };

/** %20*%20Objects. %20*%20Build%20up%20a%20portrait%20of%20your%20data%20universe %20*%20using%20the%20object%20type.%20Here,%20we%20define%20a %20*%20type%20of%20object%20that%20has%20a%20'hello'%20field %20*%20that%20is%20of%20the%20string%20type. %20*/ const%20GreetingsType%20=%20new%20GraphQLObjectType({ %20%20name:%20'Greetings', %20%20fields:%20()%20=>%20({ %20%20%20%20hello:%20{type:%20GraphQLString}, %20%20%20%20goodbye:%20{type:%20GraphQLString} %20%20}), });

/** %20*%20The%20schema. %20*%20Here%20we%20export%20a%20schema%20that%20offers%20one%20root %20*%20field%20named%20'greetings',%20and%20a%20method%20to %20*%20resolve%20its%20data. %20* %20*%20To%20learn%20more%20about%20writing%20GraphQL%20schemas%20for%20Relay,%20visit: %20*%20%20%20https://github.com/graphql/graphql-relay-js %20*/ export%20default%20new%20GraphQLSchema({ %20%20query:%20new%20GraphQLObjectType({ %20%20%20%20name:%20'Query', %20%20%20%20fields:%20()%20=>%20({ %20%20%20%20%20%20greetings:%20{ %20%20%20%20%20%20%20%20type:%20GreetingsType, %20%20%20%20%20%20%20%20//%20Here%20we%20define%20a%20resolver%20that%20returns %20%20%20%20%20%20%20%20//%20the%20data%20defined%20above.%20Were%20this%20schema %20%20%20%20%20%20%20%20//%20executing%20on%20the%20server%20side,%20you%20could %20%20%20%20%20%20%20%20//%20write%20a%20resolve%20method%20that%20fetches %20%20%20%20%20%20%20%20//%20live%20data%20from%20a%20database. %20%20%20%20%20%20%20%20resolve:%20()%20=>%20GREETINGS, %20%20%20%20%20%20}, %20%20%20%20}), %20%20}), });

Solution

  • @asubanovsky The Relay Starter Kit seems to be outdated compared with the Relay Documentation, so a better solution would be to update your version of 'react-relay' from 0.8.1 to 0.9.0 and then npm install, undo the change that u made to Relay.Store.commitUpdate and you will be ready to go.