发生突变后,从重新查询的查询中获取网络错误会导致ApolloError并取消订阅查询,我会丢失什么吗?

时间:2019-05-24 13:01:17

标签: reactjs apollo react-apollo apollo-link-rest

我正在尝试使用apollo-link-rest来实现react-apollo,除了错误处理和refetchQueries之外,其他一切看起来都很棒。

看来,如果查询出错,那么取消订阅就可以了。

我试图做几乎所有事情:使用awaitRefetchQueries或使用apollo-link-error,但是在refetchedQuery出错后,我总是在控制台中得到它:

bundle.esm.js:76 Uncaught (in promise) Error: Network error: Response not successful: Received status code 500
    at new ApolloError (bundle.esm.js:76)
    at bundle.esm.js:1556
    at bundle.esm.js:1977
    at Set.forEach (<anonymous>)
    at bundle.esm.js:1975
    at Map.forEach (<anonymous>)
    at QueryManager.broadcastQueries (bundle.esm.js:1973)
    at bundle.esm.js:1451

即使下一个响应为200,我的组件也不会更新。

查询突变是基础

export const emplacement = gql`
    query emplacement {
        emplacement @rest(type: "Emplacement", path: "/emplacement") {
            id
            data
        }
    }
`
export const completeEmplacement = gql`
    mutation completeEmplacement($body: Data!) {
        completeEmplacement(body: $body)
        @rest(
            type: "Emplacement"
            path: "/emplacement"
            method: "POST"
            bodyKey: "body"
        ) {
            msg
        }
    }
`

我的组件也是如此:

import React from "react";
import "./gql/types";
import { emplacement } from "./gql/queries";
import { completeEmplacement } from "./gql/mutations";
import { Mutation, Query } from "react-apollo";

export const MutationButton = () => {
  return (
    <Mutation mutation={completeEmplacement}>
      {(mutate, { error, data }) => {
        return (
          <>
            <h3> MUTATION VALUE </h3>

            <p> {JSON.stringify(data)}</p>
            <p style={{ color: "red" }}> {JSON.stringify(error)} </p>
            <button
              onClick={() =>
                mutate({
                  variables: { body: { id: "1", nome: "ciao" } },
                  refetchQueries: [{ query: emplacement }],
                  awaitRefetchQueries: true
                })
              }
            >
              complete
            </button>
          </>
        );
      }}
    </Mutation>
  );
};

export const QueryResult = () => {
  return (
    <>
      <Query query={emplacement}>
        {({ data, loading, error }) => {
          if (loading) return "....loading";
          const { emplacement = {} } = data || {};

          return (
            <div>
              <h3> QUERY VALUE </h3>
              <p> {JSON.stringify(emplacement)}</p>

              <p style={{ color: "red" }}>{JSON.stringify(error)}</p>
            </div>
          );
        }}
      </Query>
    </>
  );
};

我希望即使在发生突变后,每次刷新查询也会收到来自服务器的新响应。

如果突变后查询失败,那么即使下一个响应为200,我的QueryResult组件也不会得到更新。

0 个答案:

没有答案