【发布时间】:2018-11-19 06:10:45
【问题描述】:
我正在使用 reason-apollo,但在尝试设置 refetchQueries 时遇到问题。我的设置与 swapi 示例 here 非常相似。我有一个列表和一个表单,可以通过突变添加新项目。突变成功后,我想重新获取列表中的项目。我创建新项目的代码如下所示(跳过一些不相关的 ui 代码):
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>;
},
};
电影已成功添加,刷新页面时我可以在列表中看到它(使用 allFilms 查询)。但是refetchQueries似乎没有任何作用。我的后端使用的是 graph.cool,类似于文档中的 swapi 示例。任何帮助表示赞赏,谢谢!
【问题讨论】:
标签: reactjs graphql apollo reason reason-react