# Creating Query Components with Apollo

DevFeed: [Creating Query Components with Apollo](<https://devfeed.tech/articles/creating-query-components-with-apollo-27371.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/creating-query-components-with-apollo.htm>)

Author: Khan Academy

Published: 2017-06-12T22:00:00Z

Content type: tutorial

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [GraphQL](<https://devfeed.tech/topics/graphql.md>), [React](<https://devfeed.tech/topics/react.md>), [React Component](<https://devfeed.tech/topics/react-component.md>), [API](<https://devfeed.tech/topics/api.md>)

Tags: [apollo](<https://devfeed.tech/tags/apollo.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [examples](<https://devfeed.tech/tags/examples.md>), [flow](<https://devfeed.tech/tags/flow.md>), [graphql](<https://devfeed.tech/tags/graphql.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [news](<https://devfeed.tech/tags/news.md>), [react](<https://devfeed.tech/tags/react.md>), [react-component](<https://devfeed.tech/tags/react-component.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>)

## AI overview

This tutorial explains a Query Components pattern for React applications using Apollo and GraphQL. The pattern separates data definitions from presentational components, allowing the presentational layer to remain independent of Apollo and GraphQL. Examples cover filtering by postal code, loading and error states, empty results, and Flow types.

## Source excerpt

By Brian Genisio Here at Khan Academy, we've been using GraphQL in several projects with great success. GraphQL ... Read more