Created
April 11, 2018 13:25
-
-
Save j33n/e037ff4d917e0f09421c57a1ae8f2b9e to your computer and use it in GitHub Desktop.
In case you are trying to get up and running with react-apollo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import ReactDOM from "react-dom"; | |
import { ApolloClient } from "apollo-client"; | |
import { ApolloProvider, Query } from "react-apollo"; | |
import { HttpLink } from "apollo-link-http"; | |
import { InMemoryCache } from "apollo-cache-inmemory"; | |
import gql from "graphql-tag"; | |
import registerServiceWorker from "./registerServiceWorker"; | |
const client = new ApolloClient({ | |
link: new HttpLink({ uri: "https://w5xlvm3vzz.lp.gql.zone/graphql" }), | |
cache: new InMemoryCache() | |
}); | |
const ExchangeRates = () => ( | |
<Query | |
query={gql` | |
{ | |
rates(currency: "USD") { | |
currency | |
rate | |
} | |
} | |
`} | |
> | |
{({ loading, error, data }) => { | |
if (loading) return <p>Loading...</p>; | |
if (error) return <p>Error :(</p>; | |
return data.rates.map(({ currency, rate }) => ( | |
<div key={currency}> | |
<p>{`${currency}: ${rate}`}</p> | |
</div> | |
)); | |
}} | |
</Query> | |
); | |
ReactDOM.render( | |
<ApolloProvider client={client}> | |
<ExchangeRates /> | |
</ApolloProvider>, | |
document.getElementById("root") | |
); | |
registerServiceWorker(); |
They are Query components, you can read more about them here.
They Query
component is exported from react-apollo
and it just uses the render prop pattern to share Graphql data with the UI.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
hey.. what pattern is that you're using where you render the Query as a Component?