javascript - 如何在React with Apollo中执行GraphQL Query onClick？

我正在尝试根据foodType过滤特定的餐馆，该餐馆以字符串形式传递，例如（“ Chicken”，“ Pizza”等）。

我希望能够在我的React组件中执行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.log(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;

最好的方法是使上述元素使用onClick上方的GQL查询？

最佳答案

首先，我建议您将FoodTypes组件更改为React组件，以便将graphql查询返回的数据存储在state中

export class classFoodTypes extends React.Component

现在，在您的classFoodTypes组件中，您可以在获取数据后调用setState：

<li className="food-type-item" onClick={async () => {
                const { data } = await client.query({
                  query: FOODTYPE_QUERY,
                  variables: { foodType: "Pizza" }
                })}
                this.setState({eateries: data})}>Pizza</li>

在这里，您可以显示来自state的数据：

            <EateryItem
              key={this.state.eateries.id}
              id={this.state.eateries.id}
              name={this.state.eateries.name}
              address={this.state.eateries.address}
              foodType={this.state.eateries.foodType}
            />

我不会完成其余组件的实现，因此您可以练习实现，但是这种模式应该有助于您朝正确的方向发展。让我知道您是否一路陷入困境。