![](/img/trans.png)
[英]How to query with result of prior query in React + Apollo GraphQL?
[英]How do I perform GraphQL Query onClick in React with Apollo?
我試圖基於foodType
篩選特定的餐館 , 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
組件的陣營組件,以便您能夠存儲在您的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}
/>
我不會完成其余組件的實現,因此您可以練習實現,但是這種模式應該有助於您朝正確的方向發展。 讓我知道您是否一路陷入困境。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.