【问题标题】:How to use refetchQueries with reason-apollo?如何将 refetchQueries 与 reason-apollo 一起使用?
【发布时间】: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


    【解决方案1】:

    问题不在于突变,而在于我想重新获取的查询 - 它缺少其 graphql 操作名称?‍♂️

    【讨论】:

      猜你喜欢
      • 2018-04-28
      • 2018-09-05
      • 2021-01-11
      • 2019-10-14
      • 2020-03-31
      • 2019-03-28
      • 2019-01-15
      • 2020-02-14
      • 2021-10-04
      相关资源
      最近更新 更多