diff --git a/README.md b/README.md index eeb9f71..5750aa0 100644 --- a/README.md +++ b/README.md @@ -53,22 +53,22 @@ Check out [the playground](https://countries.trevorblades.com) to explore the sc ## Example -One practical use of this API is to create a country select field that fetches its options dynamically. Normally, you would need to install an npm package or create a file in your project containing the necessary data -- usually country codes and names -- and bundle that data with your app code. This results in a lot of extra kilobytes hanging around in your bundle for a feature that might not always get rendered or used. Here's what that data size looks like: +One practical use of this API is to create a country select field that fetches its options dynamically. Normally, you would need to install an npm package or create a file in your project containing the necessary data (normally country codes and names) and bundle that data with your app code. This results in a lot of extra kilobytes hanging around in your bundle for a feature that might not always get rendered or used. Here's a simple data size comparison: - **50.1 KB** with the `countries` export from [Countries List](https://annexare.github.io/Countries/) - **14.2 KB** with this API (~70% smaller) -In this example, I'll be using [React](https://reactjs.org/) and some [Apollo](https://apollographql.com) tools. Apollo's GraphQL client and React components make it simple to execute, handle, and cache GraphQL queries. You can also accomplish this by sending a POST request to this API using `fetch` or your favourite request library, but I won't cover that in this example. +This example uses [React](https://reactjs.org/) and [Apollo GraphQL](https://apollographql.com) tools. Apollo's GraphQL client and React components make it simple to execute, handle, and cache GraphQL queries. You can also accomplish this by sending a POST request to this API using `fetch` or your favourite request library, but this example won't cover that. -If you are prefer [React native](https://facebook.github.io/react-native/). Check out this [example](https://github.com/muhzi4u/country-directory-app). +If you prefer [React native](https://facebook.github.io/react-native/), check out [this example](https://github.com/muhzi4u/country-directory-app). -### 1. Install dependencies +### Install dependencies ```shell $ npm install react react-dom react-apollo apollo-boost graphql graphql-tag ``` -### 2. Build a React component +### Build the component ```js import ApolloClient from 'apollo-boost'; @@ -94,19 +94,14 @@ const GET_COUNTRIES = gql` // create a component that renders an API data-powered select input class CountrySelect extends Component { - constructor(props) { - super(props); + state = { + country: 'US' + }; - // set a default value - this.state = { - country: 'US' - }; - } - // set the selected country to the new input value - onCountryChange(event) { + onCountryChange = event => { this.setState({country: event.target.value}); - } + }; render() { return ( @@ -115,10 +110,7 @@ class CountrySelect extends Component { if (loading) return

Loading...

; if (error) return

{error.message}

; return ( - {data.countries.map(country => (