react-apollo 突变不会重新获取
react-apollo mutation doesn't refetch
我有一个组件 RecipeList 和另一个 AddRecipe。添加食谱后,它应该被重定向到 RecipeList 并显示所有项目。
这是AddRecipe组件的代码。
import React ,{Component}from 'react'
import { Mutation } from "react-apollo";
import {ADD_RECIPE} from '../../mutations';
import Error from '../Error';
import {withRouter} from 'react-router-dom';
import {GET_ALL_RECIPIES} from '../../queries'
class AddRecipe extends Component {
...
onSubmit(event,addRecipe){
event.preventDefault();
addRecipe().then(
({data})=>
{
this.props.history.push("/")
}
)
}
render (){
const{name,category,description,instruction,username} = this.state;
return(<div className="App">
<h2>Add recipe</h2>
<Mutation
mutation={ADD_RECIPE}
variables={{name,category,description,instruction,username}}
update={(cache, {data:{addRecipe}}) => {
const {getAllRecipes} = cache.readQuery({ query: GET_ALL_RECIPIES });
cache.writeQuery({
query:GET_ALL_RECIPIES,
data:{getAllRecipes:getAllRecipes.concat[addRecipe]}
})
}} >
{(addRecipe, {data,loading,error})=>
(<form className="form" onSubmit={event=>this.onSubmit(event,addRecipe)}>
<input type="text" name="name" onChange={this.handleChange.bind(this)} placeholder="recipe name" value={name}/>
<select name="category" value="breakfast" id="" onChange={this.handleChange.bind(this)} value={category}>
<option value="breakfast">breakfast</option>
<option value="lunch">lunch</option>
<option value="dinner">dinner</option>
<option value="snack">snack</option>
</select>
<input type="text" name="description" onChange={this.handleChange.bind(this)} placeholder="recipe description" value={description}/>
<textarea name="instruction" id="instruction" cols="30" rows="10" onChange={this.handleChange.bind(this)} value={instruction}> </textarea>
<button type="submit" className="button-primary" disabled = {loading || this.validateForm()}>submit</button>
{error && <Error error={error}/>}
</form>)
}
</Mutation>
</div>)
}
我的添加配方突变是:
import gql from 'graphql-tag';
//RECIPE QUERY
export const GET_ALL_RECIPIES =gql`
query {
getAllRecipes{
name
_id
category
}
}
`
最后得到食谱列表查询是:
import gql from "graphql-tag";
export const GET_RECIPE_ITEM =gql`
query($id:ID!){
getRecipeItem(_id:$id){
_id
name
category
description
instruction
createdDate
likes
username
}
}`
提交表格并添加食谱后,我希望
第一个 组件被重定向到配方列表并且
second 组件配方列表包括新添加的配方。
但我看到旧列表不包含任何新添加的食谱,为了显示新组件,我应该刷新页面。
Apollo Client 缓存数据以提高性能,并且不会重新获取您的食谱列表,因为它已经在缓存中。
为了克服这个问题,您可以将 fetchPolicy
从默认值 cache-first
更改为 cache-and-network
或 network-only
,但我不建议您这样做,或者在 addRecipe
突变后重新获取 getAllRecipes
查询,如下所示:
<Mutation
mutation={ADD_RECIPE}
variables={{name,category,description,instruction,username}}
refetchQueries=['getAllRecipes']
>
...
</Mutation>
我有一个组件 RecipeList 和另一个 AddRecipe。添加食谱后,它应该被重定向到 RecipeList 并显示所有项目。 这是AddRecipe组件的代码。
import React ,{Component}from 'react'
import { Mutation } from "react-apollo";
import {ADD_RECIPE} from '../../mutations';
import Error from '../Error';
import {withRouter} from 'react-router-dom';
import {GET_ALL_RECIPIES} from '../../queries'
class AddRecipe extends Component {
...
onSubmit(event,addRecipe){
event.preventDefault();
addRecipe().then(
({data})=>
{
this.props.history.push("/")
}
)
}
render (){
const{name,category,description,instruction,username} = this.state;
return(<div className="App">
<h2>Add recipe</h2>
<Mutation
mutation={ADD_RECIPE}
variables={{name,category,description,instruction,username}}
update={(cache, {data:{addRecipe}}) => {
const {getAllRecipes} = cache.readQuery({ query: GET_ALL_RECIPIES });
cache.writeQuery({
query:GET_ALL_RECIPIES,
data:{getAllRecipes:getAllRecipes.concat[addRecipe]}
})
}} >
{(addRecipe, {data,loading,error})=>
(<form className="form" onSubmit={event=>this.onSubmit(event,addRecipe)}>
<input type="text" name="name" onChange={this.handleChange.bind(this)} placeholder="recipe name" value={name}/>
<select name="category" value="breakfast" id="" onChange={this.handleChange.bind(this)} value={category}>
<option value="breakfast">breakfast</option>
<option value="lunch">lunch</option>
<option value="dinner">dinner</option>
<option value="snack">snack</option>
</select>
<input type="text" name="description" onChange={this.handleChange.bind(this)} placeholder="recipe description" value={description}/>
<textarea name="instruction" id="instruction" cols="30" rows="10" onChange={this.handleChange.bind(this)} value={instruction}> </textarea>
<button type="submit" className="button-primary" disabled = {loading || this.validateForm()}>submit</button>
{error && <Error error={error}/>}
</form>)
}
</Mutation>
</div>)
}
我的添加配方突变是:
import gql from 'graphql-tag';
//RECIPE QUERY
export const GET_ALL_RECIPIES =gql`
query {
getAllRecipes{
name
_id
category
}
}
`
最后得到食谱列表查询是:
import gql from "graphql-tag";
export const GET_RECIPE_ITEM =gql`
query($id:ID!){
getRecipeItem(_id:$id){
_id
name
category
description
instruction
createdDate
likes
username
}
}`
提交表格并添加食谱后,我希望 第一个 组件被重定向到配方列表并且 second 组件配方列表包括新添加的配方。 但我看到旧列表不包含任何新添加的食谱,为了显示新组件,我应该刷新页面。
Apollo Client 缓存数据以提高性能,并且不会重新获取您的食谱列表,因为它已经在缓存中。
为了克服这个问题,您可以将 fetchPolicy
从默认值 cache-first
更改为 cache-and-network
或 network-only
,但我不建议您这样做,或者在 addRecipe
突变后重新获取 getAllRecipes
查询,如下所示:
<Mutation
mutation={ADD_RECIPE}
variables={{name,category,description,instruction,username}}
refetchQueries=['getAllRecipes']
>
...
</Mutation>