2

我正在尝试用 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 组件也不会更新。

4

0 回答 0