0

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クライアントでそうしようとしています。今のところ、ドキュメントで説明されているようにバニラ メソッドでクエリを実行でき、正しい結果が得られました。

しかし、ここで説明されているように、react apolloツールでそれを行うのに苦労していますhttp://dev.apollodata.com/react/。コードは次のとおりです。

// ...

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>
    );
  }
});

...アポロがどのように機能するのか正確にはわかりません。React NativeとGraphQlも初めてなので、基本的にかなり迷っています。ドキュメントはあまり役に立ちません:/

4

1 に答える 1

1
  • 定義していますがGrocerListViewWithData、でのみ使用GrocerListViewしAlpuzonPageます。
  • 代わりにアクセスGrocerListViewする必要があり、読み込みが完了するまで待つ必要がありますthis.props.datadatathis.props.data.loading

これは更新されたコードです:

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);

Apollo で React Native の実際の例を試してみたい場合は、Learn Apolloをチェックしてください。React Native と Exponent JS トラックもあります :)

于 2016-12-20T19:37:49.357 に答える