Reactjs 如何使用refetchQueries with reason apollo?
我正在使用reason apollo,在尝试设置Reactjs 如何使用refetchQueries with reason apollo?,reactjs,graphql,apollo,reason,reason-react,Reactjs,Graphql,Apollo,Reason,Reason React,我正在使用reason apollo,在尝试设置refetchQueries时遇到问题。我的设置与swapi示例非常相似。我有一个列表和一个表单,可以通过一个变体添加一个新项目。变异成功后,我想重新提取列表中的项目。我创建新项目的代码如下所示(跳过一些不相关的ui代码): module CreateFilm=[%graphql {| 创建电影($name:String!,$favorite:Boolean!,$rating:Int!,$ratedOn:DateTime!){ createFilm
refetchQueries
时遇到问题。我的设置与swapi示例非常相似。我有一个列表和一个表单,可以通过一个变体添加一个新项目。变异成功后,我想重新提取列表中的项目。我创建新项目的代码如下所示(跳过一些不相关的ui代码):
module CreateFilm=[%graphql
{|
创建电影($name:String!,$favorite:Boolean!,$rating:Int!,$ratedOn:DateTime!){
createFilm(名称:$name,收藏夹:$favorite,评级:$rating,ratedOn:$ratedOn){
身份证件
最喜欢的
名称
评级
}
}
|}
];
模块CreateFilmMutation=ReasonApollo.CreateMutation(CreateFilm);
类型状态={
最喜欢的:布尔,
评级:int,
};
类型动作=
|切换收藏夹
|更新(int);
让组件=ReasonReact.reducerComponent(“FilmNew”);
让make=\u children=>{
…组件,
initialState:()=>{收藏夹:true,评级:5},
减速器:动作=>
开关(动作){
|togglefavorite=>(
state=>ReasonReact.Update({…state,favorite:!state.favorite})
)
|更新(新评级)=>(
state=>ReasonReact.Update({…state,rating:newRating})
)
},
呈现:({state,send})=>{
现在让我们=Js.Date.make()|>Js.Date.toISOString |>Js.Json.string;
让我们来看看新电影=
制作电影(
~name=“临时测试”,
~rating=state.rating,
~favorite=state.favorite,
~ratedOn=现在,
(),
);
...(
(突变,_结果)=>
{
ReactEventRe.Synthetic.preventDefault(事件);
突变(
~refetchQueries=[|“所有电影”|],
~variables=newFilm##variables,
(),
)
|>忽视;
}
)>
发送(切换收藏夹))
/>
(“是宠儿”|>ReasonReact.string)
)
;
},
};
该电影被成功添加,当页面刷新时,我可以在列表中看到它(使用
allFilms
查询)。但是refetchquerys
似乎没有任何效果。我的后端使用graph.cool,类似于文档中的swapi示例。感谢您的帮助,谢谢 问题不在于突变,而在于我想要重新蚀刻的查询——它缺少graphql操作名称
module CreateFilm = [%graphql
{|
mutation createFilm($name: String!, $favourite: Boolean!, $rating: Int!, $ratedOn: DateTime!) {
createFilm(name: $name, favourite: $favourite, rating: $rating, ratedOn: $ratedOn) {
id
favourite
name
rating
}
}
|}
];
module CreateFilmMutation = ReasonApollo.CreateMutation(CreateFilm);
type state = {
favourite: bool,
rating: int,
};
type action =
| ToggleFavourite
| UpdateRating(int);
let component = ReasonReact.reducerComponent("FilmNew");
let make = _children => {
...component,
initialState: () => {favourite: true, rating: 5},
reducer: action =>
switch (action) {
| ToggleFavourite => (
state => ReasonReact.Update({...state, favourite: ! state.favourite})
)
| UpdateRating(newRating) => (
state => ReasonReact.Update({...state, rating: newRating})
)
},
render: ({state, send}) => {
let now = Js.Date.make() |> Js.Date.toISOString |> Js.Json.string;
let newFilm =
CreateFilm.make(
~name="Temporary test",
~rating=state.rating,
~favourite=state.favourite,
~ratedOn=now,
(),
);
<CreateFilmMutation>
...(
(mutation, _result) =>
<form
onSubmit=(
event => {
ReactEventRe.Synthetic.preventDefault(event);
mutation(
~refetchQueries=[|"allFilms"|],
~variables=newFilm##variables,
(),
)
|> ignore;
}
)>
<input
className="toggle"
_type="checkbox"
checked=state.favourite
onChange=((_) => send(ToggleFavourite))
/>
("is favourite" |> ReasonReact.string)
<input _type="submit" value="Submit" />
</form>
)
</CreateFilmMutation>;
},
};