假设我们有这样的突变:
const [addCryptoAddress] =
useMutation(graphql`
mutation useCrypto_AddCryptoWalletAddressMutation(
$input: AddCryptoAddressInput!
) {
addCryptoAddress(input: $input) {
userAccount {
cryptoCurrencyAddresses {
count
edges {
node {
id
address
}
}
}
}
errors {
message
}
}
}
`);
如果成功,新的CryptoCurrencyAddresses
将在UserAccount
下可用。
现在假设在代码的其他地方我们有一个lazyLoadQuery
来获取这些地址,例如
const { visitor } = useLazyLoadQuery<ManualPayoutMachineContextQuery>(
graphql`
query ManualPayoutMachineContextQuery {
visitor {
userAccount {
cryptoCurrencyAddresses {
edges {
node {
id
address
canDelete
currency
isDefault
label
}
}
}
}
}
}
`,
{}
);
但是,请注意该查询引用了在突变中未提到的其他字段。结果是所有未提及的字段在突变后立即未定义,即
visitor.userAccount?.cryptoCurrencyAddresses.edges
.map(({ node }) => {
return {
address: node.address,
canDelete: node.canDelete,
currency: node.currency,
id: node.id,
isDefault: node.isDefault,
label: node.label,
};
});
生产:
[
{
address: '0xc0ffee254729296a45a3885639AC7E10F9d54979',
canDelete: undefined,
currency: undefined,
id: 'WyJDcnlwdG9DdXJyZW5jeUFkZHJlc3MiLDIwMjE3NF0=',
isDefault: undefined,
label: undefined,
}
]
除了列出突变中的每个重叠字段之外,是否有一种方法可以强制所有依赖于此数据的查询在检测到新数据时重新加载?
可以设置fetchPolicy
为store-and-network
,如下所示:
const { visitor } = useLazyLoadQuery<ManualPayoutMachineContextQuery>(
graphql`
query ManualPayoutMachineContextQuery {
visitor {
userAccount {
cryptoCurrencyAddresses {
edges {
node {
id
address
canDelete
currency
isDefault
label
}
}
}
}
}
}
`,
{},
{
fetchPolicy: 'store-and-network',
}
);
store-and-network
将使用存储的数据,并且总是执行一个网络请求,而不进行忽略。