[英]How do I perform GraphQL Query onClick in React with Apollo?
I'm trying to filter particular Eateries based on foodType
which is passed as a string eg("Chicken", "Pizza" etc). 我试图基于
foodType
筛选特定的餐馆 , foodType
作为字符串传递,例如(“ Chicken”,“ Pizza”等)。
I want to be able to do it onClick
in my React component . 我希望能够在React组件中的
onClick
上完成此操作。
I've tried wrapping in an <ApolloPriver>
wrapper to do a query but not had much luck. 我试过用
<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>
)}
The GQL query I want to pass 我要传递的GQL查询
const FOODTYPE_QUERY = gql`
query foodTypeQuery($foodType: String!) {
getFoodType(foodType: $foodType) {
id
name
address
foodType
}
}
`;
How I'm currently showing all the eateries in FoodTypes.tsx
. 我目前如何在
FoodTypes.tsx
显示所有餐馆。 This is where I want the results to go onClick
of the buttons above. 这是我希望结果显示在上面按钮的
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>
The whole FoodTypes.tsx
整个
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;
Updated FoodTypes.tsx
更新了
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;
What would the best approach be to get the above elements to use the GQL query above onClick? 最好的方法是使上述元素使用onClick上方的GQL查询?
Firstly, I would recommend you change your FoodTypes
component to a React component so that you are able to store the data returned from your graphql query in state
首先,我会建议你改变你的
FoodTypes
组件的阵营组件,以便您能够存储在您的graphql查询返回的数据state
export class classFoodTypes extends React.Component
Now, in your classFoodTypes
component, you can call setState
after fetching your data: 现在,在您的
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>
From there, you can display your data from state
: 从那里,您可以显示来自
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}
/>
I'm not going to finish implementing the rest of your component so you can practice the implementation, but this pattern should help lead you in the right direction. 我不会完成其余组件的实现,因此您可以练习实现,但是这种模式应该有助于您朝正确的方向发展。 Let me know if you get stuck along the way.
让我知道您是否一路陷入困境。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.