apolloでデータを取得してネイティブに反応させる方法

Question

私はexpress-graphqlを使って簡単なgraphqlサーバーを作れました。クエリのhttp://localhost:8080/graphqlで

：

{ 
     grocers { 
     _id 
     name 
     description 
     location 
     }, 
     products(grocerId: "585676ef987ed341fed7fdd2") { 
     name 
     } 
    } 

は、私は、次を得る：

{ 
    "data": { 
    "grocers": [ 
     { 
     "_id": "58567074987ed341fed7fcb1", 
     "name": "Martina", 
     "description": "Las mejores verduras de la alpujarra", 
     "location": "Ugíjar" 
     }, 
     { 
     "_id": "585676ef987ed341fed7fdd2", 
     "name": "Antonio", 
     "description": "Leña y calorcito para todos!", 
     "location": "Ugíjar" 
     } 
    ], 
    "products": [ 
     { 
     "name": "Concierto de guitarra" 
     } 
    ] 
    } 
} 

これまでのところは良いです。今、私はReact Nativeから質問したいと思います。私はApolloクライアントでこれをやろうとしています。今のところ、ドキュメントで説明されているようにvanillaメソッドを使用してクエリを実行できましたが、正しい結果が得られました。

しかし、私は今ここで説明されているように反応するアポロツールでそれをするのに苦労していますhttp://dev.apollodata.com/react/。私は、私もそう基本的に私はかなり迷ってしまいましたネイティブとGraphQlを反応させるために新たなんだ正確にどのようにアポロ作品を知らない...

// ... 

const networkInterface = createNetworkInterface({ uri: 'http://localhost:8080/graphql' }); 

const client = new ApolloClient({ 
    networkInterface 
}); 

class Alpuzon extends Component { 

    constructor() { 
    super(...arguments); 

    } 

    _renderScene(route, navigator) { 
    if (route.id === 1) { 
     return <AlpuzonPage navigator={navigator} /> 
    } else if (route.id === 2) { 
     return <PageTwo navigator={navigator} /> 
    } 

    return false; 
    } 

    _configureScene() { 
    return Navigator.SceneConfigs.FloatFromRight; 
    } 

    render() { 
    return (
     <ApolloProvider client={client}> 
     <Navigator 
      initialRoute={{ id: 1 }} 
      renderScene={this._renderScene} 
      configureScene={this._configureScene} 
     /> 
     </ApolloProvider> 
    ); 
    } 
} 

// ... 

let AlpuzonPage = React.createClass({ 

    _handlePress() { 
    this.props.navigator.push({id: 2}); 
    }, 

    render() { 

    const getGrocersQuery = gql`query getGrocersQuery { grocers { name } }`; 

    class GrocerListView extends Component { 
     render() { 
     <ListView 
      dataSource={data.grocers} 
      renderRow={(obj) => <Text>{obj.name}</Text>} 
     /> 
     } 
    } 

    GrocerListView.propTypes = { 
     data: PropTypes.shape({ 
     loading: PropTypes.array.isRequired, 
     grocers: PropTypes.array 
     }).isRequired 
    }; 

    const GrocerListViewWithData = graphql(getGrocersQuery)(GrocerListView); 

    return (
     <View style={{ flex: 1, flexDirection: 'column'}}> 
     <GrocerListView /> 
     </View> 
    ); 
    } 
}); 

：ここでは、コードです。ドキュメントはずっと私を助けていません：あなたはGrocerListViewWithDataを定義するだけAlpuzonPageでGrocerListViewを使用している/

Answer 1

• 。あなたが作業を試してみたい場合は

  let AlpuzonPage = React.createClass({ 
  
      _handlePress() { 
      this.props.navigator.push({id: 2}); 
      }, 
  
      render() { 
  
      return (
       <View style={{ flex: 1, flexDirection: 'column'}}> 
       <GrocerListViewWithData /> 
       </View> 
      ); 
      } 
  }); 
  
  class GrocerListView extends Component { 
      render() { 
      if (this.props.data.loading) { 
       return (<div>Loading</div>) 
      } 
  
      <ListView 
       dataSource={this.props.data.grocers} 
       renderRow={(obj) => <Text>{obj.name}</Text>} 
      /> 
      } 
  } 
  
  GrocerListView.propTypes = { 
      data: PropTypes.shape({ 
      loading: PropTypes.array.isRequired, 
      grocers: PropTypes.array 
      }).isRequired 
  }; 
  
  const getGrocersQuery = gql`query getGrocersQuery { grocers { name } }`; 
  
  const GrocerListViewWithData = graphql(getGrocersQuery)(GrocerListView); 
  

  ：あなたはthis.props.data代わりのdataにアクセスしなければならないし、あなたもこれが更新されたコードであるロード

を終了するthis.props.data.loadingを待つ必要がGrocerListViewで

React Native with Apollo、チェックLearn Apollo、リアクションネイティブとExponent JSトラックがあります:)