Add query variables

Author: mreorhan

src/graphql/queries.js

@@ -1,8 +1,8 @@
 import gql from 'graphql-tag';
 
 export const EXAMPLE = gql`
-{
-  search(term: "burrito", location: "san francisco") {
+  query Search($term: String!,$location:String!) {
+  search(term: $term, location: $location) {
     total
     business {
       name

src/screens/home.js

@@ -5,30 +5,39 @@ import { Query } from "react-apollo";
 
 
 export default class Home extends Component {
+    getYelp({ term, location }) {
+        return (
+            <Query query={EXAMPLE} variables={{ term, location }}>
+                {({ loading, data: { search }, error }) => {
+                    if (loading) {
+                        return <Text>Loading...</Text>
+                    }
+                    if (search) {
+                        const result = search.business.map((i, index) => {
+                            return (
+                                <View key={index}>
+                                    <Text>{index + 1 + ". " + i.name}</Text>
+                                    <Text>Rating: {i.rating} - Review: {i.review_count}</Text>
+                                    <Text>{i.location.address1}</Text>
+                                </View>)
+                        })
+                        return result;
+                    }
+                    if (error)
+                        return <Text>{error.message}</Text>
+
+                    return (
+                        <Text>No result</Text>
+                    );
+                }}
+            </Query>
+        )
+    }
     render() {
+
         return (
             <ScrollView>
-                <Query query={EXAMPLE}>
-                    {({ client, loading, data: { search } }) => {
-                        if (loading) {
-                            return <Text>Loading...</Text>
-                        }
-                        if (search) {
-                            const result = search.business.map((i, index) => {
-                                return (
-                                    <View key={index}>
-                                        <Text>{index+1 + ". " + i.name}</Text>
-                                        <Text>Rating: {i.rating} - Review: {i.review_count}</Text>
-                                        <Text>{i.location.address1}</Text>
-                                    </View>)
-                            })
-                            return result;
-                        }
-                        return (
-                            <Text>No result</Text>
-                        );
-                    }}
-                </Query>
+                {this.getYelp({ term: "burrito", location: "san francis" })}
             </ScrollView>
         )
     }