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