React-Apolloインコヒーレントデータ

Question

私はReactでApolloを試していましたが、現在問題が発生しています。

私は、これはここでは、この

{ 
    "data": { 
    "p": { 
     "id": 1, 
     "name": "Samsung Galaxy S7", 
     "categories": [ 
     { 
      "name": "Phone" 
     }, 
     { 
      "name": "Samsung" 
     } 
     ] 
    } 
    } 
} 

のようなものを返す期待通りの製品は、多くのカテゴリー

query getProduct{ 
    product(id: 1){ 
     id 
     name 
     categories{id,name} 
    } 
} 

に属している基本的なデータを持っている私は、コンポーネント

class TileProductComponent extends Component{ 

    constructor(...args){ 
     super(...args) 
    } 

    render(){ 
     if(this.props.data.loading) 
      return <div>Loading...</div> 

     var product = this.props.data.p 

     console.log(this.props.data) 

     return (
      <div> {product.name} </div> 
     ) 
    } 
} 

var TileProduct = graphql(
    gql` 
     query TestQuery($id: Int!){ 
      product(id: $id){ 
       id 
       name 
       categories{id,name} 
      } 
     } 
    `, 
    { 
     options : { 
      variables : {id:1} 
     } 
    } 
)(TileProductComponent) 

しかし、一度に反応していますそれは反応コンポーネントに渡されていることがわかりました（console.log（this.props.d ata））

"product": { 
     "id": 1, 
     "name": "Phone", 
     "categories": [ 
     { 
      "name": "Phone" 
     }, 
     { 
      "name": "Samsung" 
     } 
     ] 
    } 

商品名は何らかの理由で最初のカテゴリの名前を採用していますか？私もそのIDを推測しています。修正は、スキーマのフィールドの名前を変更することですが、それはとにかく私の意見では本当にそれを行うべきではありません。

これは既知の問題ですか、これを体験している唯一の問題ですか？任意の提案されたソリューション？

Answer 1

問題はdataIdFromObjectの機能にあります。この関数は、サーバーから来るさまざまなオブジェクトに対して一意の値を返す必要があります。これを行う簡単な方法の1つは、IDフィールドと共にGraphQLに組み込まれた__typenameフィールドを使用することです。ここでは、コードスニペットがあります：

const client = new ApolloClient({ 
    queryTransformer: addTypename, 
    dataIdFromObject: (result) => { 
    if (result.id && result.__typename) { 
     return result.__typename + result.id; 
    } 
    return null; 
    } 
}); 

それはアプリのコンテキストで使用を確認するには、SQL増分IDを使用した、GitHuntフロントエンドの例をチェックアウト：https://github.com/apollostack/GitHunt-React/blob/380bedaef97f2a0932c1ab33bd964812d4a8a65e/ui/client.js#L42-L48