import React from "react"; import { AppRegistry, View, StyleSheet, Text } from "react-native-web"; import { ApolloClient } from "apollo-client"; import { InMemoryCache } from "apollo-cache-inmemory"; import { ApolloProvider, Query } from "react-apollo"; import gql from "graphql-tag"; import { HttpLink } from "apollo-link-http"; import { BatchHttpLink } from "apollo-link-batch-http"; import { split } from "apollo-link"; const uri = "https://apollo-launchpad.glitch.me/graphql"; // link to use if batching (default) // also adds a `batch: true` header to the request to prove it's a different link const batchHttpLink = new BatchHttpLink({ uri, headers: { batch: "true " } }); // link to use if not batching const httpLink = new HttpLink({ uri }); const client = new ApolloClient({ // the link to use is a either the default or batch link link: split( operation => operation.getContext().important === true, httpLink, // if the test is true -- debatch batchHttpLink // otherwise, batching is fine ), cache: new InMemoryCache() }); const App = () => ( {/* suppose this fist query is expensive */} {/* add `important: true` to the operation's context to debatch it */} {({ loading, error, data }) => { return loading ? ( Loading... ) : ( Unbatched: {data.hello} ); }} {({ loading, error, data }) => { return loading ? ( Loading... ) : ( Batched: {data.hello} ); }} ); AppRegistry.registerComponent("App", () => App); AppRegistry.runApplication("App", { rootTag: document.getElementById("root") });