我有一个apollo react的React应用程序用于状态管理。但是我发现当通过re-render进行更改时，我的react组件不是mutation。我的应用程序中没有graphql的服务器端。一切都在前端运行。以下是apollo client初始化代码：
const cache = new InMemoryCache();
const client = new ApolloClient({
cache,
resolvers: {
Mutation: {
cart: (parent, args, context, info) => {
console.log('resolvers:',parent, args, );
return {products: args.name };
},
}
}
});
cache.writeData({
data: {
cart: { products: 'prod1', __typename: 'Product' }
}
});
上面的代码用于初始化客户端并通过cache.writeData发送初始数据。它包含一个resolver，该products返回具有给定参数的更改后的const GET_CART = gql`
{
cart @client {
products
}
}
`;
export const QueryTest = () => {
return (
<Query query={GET_CART}>
{({ data, loading, error, refetch }) => {
console.log('query resulte ', data, loading, error);
return <button onClick={() => refetch()}>{data.cart.products}</button>;
}}
</Query>
);
};
。
下面是查询组件：
mutation它侦听查询数据“购物车->产品”的更改。
下面是onst mutation = gql`
mutation cart($name: string) {
cart(name: $name) @client
}
`;
export const MutationTest = () => {
return (
<Mutation
mutation={mutation}
update={(cache, { data }) => {
console.log('update in mutation:', data);
cache.writeQuery({
query: GET_CART,
data: data.cart
});
}}
>
{(cart, { data }) => {
console.log('insdie:', data);
return <button onClick={() => cart({ variables: { name: 'hello' } })}>mutate</button>;
}}
</Mutation>
);
};
组件：
hello当我单击按钮时，它将向graphql server发送名称resolver，并且可以看到products被触发，它返回update数据上的新更改。单击按钮后，将调用cache函数，它将更改写入Query。
但是//div[contains(.,'firstname') and contains(.,'lastname')]
组件并未针对该更改进行重新渲染。我的代码是否有问题？我不知道我错过了什么。