Как выполнить запрос GraphQL onClick в React с помощью Apollo?

Я пытаюсь отфильтровать конкретный Закусочные на основе foodType, который передается как нить, например («Курица», «Пицца» и т. д.).

Я хочу иметь возможность сделать это onClick в моем Реагировать компонент.

Я пытался завернуть в оболочку <ApolloPriver>, чтобы выполнить запрос, но мне не повезло.

FoodType.tsx

export const FoodTypes: React.SFC = () => {
  return (
    <div className = "food-types">
      <ul className = "food-type-list">
        <li className = "food-type-item" onClick = {async () => {
                const { data } = await client.query({
                  query: FOODTYPE_QUERY,
                  variables: { foodType: "Pizza" }
                })}}>Pizza</li>
        <li className = "food-type-item" onClick = {}>Chicken</li>
        <li className = "food-type-item" onClick = {}>Indian</li>
        <li className = "food-type-item" onClick = {}>Chinese</li>
        <li className = "food-type-item" onClick = {}>English</li>
        <li className = "food-type-item" onClick = {}>Fish & Chips</li>
        <li className = "food-type-item" onClick = {}>Kebab</li>
        <li className = "food-type-item" onClick = {}>Curry</li>
        <li className = "food-type-item" onClick = {}>Caribbean</li>
      </ul>
)}

Запрос GQL, который я хочу передать

const FOODTYPE_QUERY = gql`
  query foodTypeQuery($foodType: String!) {
    getFoodType(foodType: $foodType) {
      id
      name
      address
      foodType
    }
  }
`;

Как я сейчас показываю все закусочные в FoodTypes.tsx. Вот куда я хочу, чтобы результаты пошли onClick кнопок выше.

<div className = {"EateryWrapper"}>
        <ApolloProvider client = {client}>
          <Query query = {EATERY_QUERY}>
            {({ loading, data }: any) => {
              if (loading) return "Loading...";
              const { eateries } = data;
              return eateries.map((eatery: any) => (
                <EateryItem
                  key = {eatery.id}
                  id = {eatery.id}
                  name = {eatery.name}
                  address = {eatery.address}
                  foodType = {eatery.foodType}
                />
              ));
            }}
          </Query>
        </ApolloProvider>
      </div>

Весь FoodTypes.tsx

import React from "react";
import "./FoodTypes.scss";
import { ApolloProvider, Query } from "react-apollo";
import { gql } from "apollo-boost";

import { client } from "../..";
import { EateryItem } from "../Eatery/EateryItem";

const EATERY_QUERY = gql`
  {
    eateries {
      id
      name
      address
      foodType
    }
  }
`;

const FOODTYPE_QUERY = gql`
  query foodTypeQuery($foodType: String!) {
    getFoodType(foodType: $foodType) {
      id
      name
      address
      foodType
    }
  }
`;

export const FoodTypes: React.SFC = () => {
  return (
    <div className = "food-types">
      <ul className = "food-type-list">
        <li className = "food-type-item" onClick = {async () => {
          const { data } = await client.query({
            query: FOODTYPE_QUERY,
            variables: { foodType: "Pizza" }
          })
          console.info(data)}
        }>Pizza</li>
        <li className = "food-type-item">Chicken</li>
        <li className = "food-type-item">Indian</li>
        <li className = "food-type-item">Chinese</li>
        <li className = "food-type-item">English</li>
        <li className = "food-type-item">Fish & Chips</li>
        <li className = "food-type-item">Kebab</li>
        <li className = "food-type-item">Curry</li>
        <li className = "food-type-item">Caribbean</li>
      </ul>
      <div className = {"EateryWrapper"}>
        <ApolloProvider client = {client}>
          <Query query = {EATERY_QUERY}>
            {({ loading, data }: any) => {
              if (loading) return "Loading...";
              const { eateries } = data;
              return eateries.map((eatery: any) => (
                <EateryItem
                  key = {eatery.id}
                  id = {eatery.id}
                  name = {eatery.name}
                  address = {eatery.address}
                  foodType = {eatery.foodType}
                />
              ));
            }}
          </Query>
        </ApolloProvider>
      </div>
    </div>
  );
};

export default FoodTypes;

Обновлено FoodTypes.tsx

import React, { Component, useState } from "react";
import "./FoodTypes.scss";
import { ApolloProvider, Query } from "react-apollo";
import { gql } from "apollo-boost";

import { client } from "../..";
import { EateryItem } from "../Eatery/EateryItem";

const EATERY_QUERY = gql`
  {
    eateries {
      id
      name
      address
      foodType
    }
  }
`;

const FOODTYPE_QUERY = gql`
  query foodTypeQuery($foodType: String!) {
    getFoodType(foodType: $foodType) {
      id
      name
      address
      foodType
    }
  }
`;

type foodTypeFilterProps = {
  foodTypeName: String
}

export const FoodTypes: React.SFC = () => {
  return (
    <div className = "food-types">
      <ul className = "food-type-list">
        <FoodTypeFilter foodTypeName = {'Italian'}/>
        <FoodTypeFilter foodTypeName = {'Pizza'}/>
        <FoodTypeFilter foodTypeName = {'Chicken'}/>
        <FoodTypeFilter foodTypeName = {'Indian'}/>
        <FoodTypeFilter foodTypeName = {'Chinese'}/>
        <FoodTypeFilter foodTypeName = {'English'}/>
        <FoodTypeFilter foodTypeName = {'Fish & Chips'}/>
        <FoodTypeFilter foodTypeName = {'Kebab'}/>
        <FoodTypeFilter foodTypeName = {'Curry'}/>
        <FoodTypeFilter foodTypeName = {'Caribbean'}/>
      </ul>
      <div className = {"EateryWrapper"}>
        <ApolloProvider client = {client}>
          <Query query = {EATERY_QUERY}>
            {({ loading, data }: any) => {
              if (loading) return "Loading...";
              const { eateries } = data;
              return eateries.map((eatery: any) => (
                <EateryItem
                  key = {eatery.id}
                  id = {eatery.id}
                  name = {eatery.name}
                  address = {eatery.address}
                  foodType = {eatery.foodType}
                />
                ));
            }}
          </Query>
        </ApolloProvider>
      </div>
    </div>
  );
};

const FoodTypeFilter: React.FunctionComponent<foodTypeFilterProps> = props => {
  const [foodType, setFoodType] = useState(props.foodTypeName);
  return(
    <li className = "food-type-item" onClick = {async () => {
      const { data } = await client.query({
        query: FOODTYPE_QUERY,
        variables: { foodType: props.foodTypeName }
      })
      setFoodType(foodType);
      }}>{foodType}
      </li>
  )
}

export default FoodTypes;

Каков наилучший подход, чтобы заставить вышеуказанные элементы использовать запрос GQL выше onClick?