リレープレイグラウンド - どのように機能するのですか？

Question

私はこのようなRelay Playgroundに（スキーマ内の "テキスト" に "こんにちは"）に変更：

SCHEMA：

import { 
    GraphQLObjectType, 
    GraphQLSchema, 
    GraphQLString, 
    GraphQLInt 
} from 'graphql'; 

const GREETINGS = 
    {text: 'Hello world 1'} 
; 

const GreetingsType = new GraphQLObjectType({ 
    name: 'Greetings', 
    fields:() => ({ 
    text: {type: GraphQLString} 
    }) 
}); 

export default new GraphQLSchema({ 
    query: new GraphQLObjectType({ 
    name: 'Query', 
    fields:() => ({ 
     greetings: { 
     type: GreetingsType, 
     resolve:() => GREETINGS 
     } 
    }) 
    }) 
}); 

CODE：

class HelloApp extends React.Component { 
    render() { 
    const {hello} = this.props.greetings; 
    return <h1>test: {hello}</h1>; 
    } 
} 

HelloApp = Relay.createContainer(HelloApp, { 
    fragments: { 
    greetings:() => Relay.QL` 
     fragment on Greetings { 
     text 
     } 
    `, 
    } 
}); 

class HelloRoute extends Relay.Route { 
    static routeName = 'Hello'; 
    static queries = { 
    greetings: (Component) => Relay.QL` 
     query GreetingsQuery { 
     greetings { 
      ${Component.getFragment('greetings')}, 
     }, 
     } 
    `, 
    }; 
} 

ReactDOM.render(
    <Relay.RootContainer Component={HelloApp} route={new HelloRoute()} />, 
    mountNode 
); 

しかし、それは動作しませんし、エラーメッセージは表示されません。何もレンダリングされません。 「テキスト」を「こんにちは」に戻すと、それは再び機能します。どうして？スキーマがハードコードされているようですか？

EDIT：

これは、（私が理由を知っている）作品：ない作品以下

const {text} = this.props.greetings; 
return <h1>test: {text}</h1>; 

が、これを（そして、なぜならば、私は知らない。

const sm = this.props.greetings; 
return <h1>test: {sm.text}</h1>; 

これはあまりにも動作します上記の "テキスト"変数名に特有のものは何ですか？）：

const {sm} = this.props.greetings; 
return <h1>test: {sm}</h1>; 

解決：

ES6機能。中括弧はプロパティを含む必要があります。これがtextが動作する理由です。ありがとう@ヴィンス寧。あなたのアプリを反応させるので

Answer 1

、あなたはあなたにそうようなあなたの小道具を構造化代入されます。挨拶以来

const {hello} = this.props.greetings; 

はJSONオブジェクトである、あなたはそのオブジェクトだけではなく、それの残りのハロープロパティを取得しました。正しいデータを得るために、あなたはその声明の中でハローの周りに{}を除去することにより、オブジェクト全体を取得することができ、次のいずれか

const hello = this.props.greetings; 
console.log(hello.text); // Hello world 1 

それとも、のようなその特定のプロパティを取得するために、テキストに{}内のhelloを変更することができますso：

const {text} = this.props.greetings; 
console.log(text); // Hello world 1 

これは役に立ちます。