reactjs - @apollo/client 的 InMemoryCache 发出警告

Question

当我使用突变更新“事务”时，我已经开始收到此警告。该代码是旧的，并且之前有较新的显示此警告。我不知道这种回归是什么时候开始的。奇怪的是，在我看来也不应该有缓存，因为 fetchPolicy: "network-only" 已设置。

我怎样才能摆脱警告？

invariant.esm.js:42 Cache data may be lost when replacing the transactions field of a Query object.

To address this problem (which is not a bug in Apollo Client), 
define a custom merge function for the Query.transactions field, 
so InMemoryCache can safely merge these objects:

  existing: [{"__ref":"Transaction:5feabda25e7967001267ffd2"},
  {"__ref":"Transaction:5feabda55e7967001267ffd3"},
  {"__ref":"Transaction:5feabda75e7967001267ffd4"},
  {"__ref":"Transaction:5feabda95e7967001267ffd5"},
  {"__ref":"Transaction:5feabdab5e7967001267ffd6"},
  {"__ref":"Transaction:60127209c3731400116fe0c5"},
  {"__ref":"Transaction:602543cde12cd00011881a8b"},
  {"__ref":"Transaction:602544e7e12cd00011881a91"},
  {"__ref":"Transaction:602f7d9be14be20011a5cbec"},
  {"__ref":"Transaction:6033b4d5ad34870011e7ba08"},
  {"__ref":"Transaction:603494fbad34870011e7bf07"},
  {"__ref":"Transaction:6038a0519d844c00116e544f"},
  {"__ref":"Transaction:6038a05f9d844c00116e545e"},
  {"__ref":"Transaction:6038a06c9d844c00116e549e"},
  {"__ref":"Transaction:6038a06f9d844c00116e54a1"},
  {"__ref":"Transaction:6038a0549d844c00116e5452"},
  {"__ref":"Transaction:6038a0629d844c00116e545f"},
  {"__ref":"Transaction:6038a0699d844c00116e549a"},
  {"__ref":"Transaction:603cd5c39d844c00116f232b"},
  {"__ref":"Transaction:603ce07d9d844c00116f2342"},
  {"__ref":"Transacti
  incoming: [{"__ref":"Transaction:5feabda25e7967001267ffd2"},
  {"__ref":"Transaction:5feabda55e7967001267ffd3"},
  {"__ref":"Transaction:5feabda75e7967001267ffd4"},
  {"__ref":"Transaction:5feabda95e7967001267ffd5"},
  {"__ref":"Transaction:5feabdab5e7967001267ffd6"},
  {"__ref":"Transaction:60127209c3731400116fe0c5"},
  {"__ref":"Transaction:602543cde12cd00011881a8b"},
  {"__ref":"Transaction:602544e7e12cd00011881a91"},
  {"__ref":"Transaction:602f7d9be14be20011a5cbec"},
  {"__ref":"Transaction:6033b4d5ad34870011e7ba08"},
  {"__ref":"Transaction:603494fbad34870011e7bf07"},
  {"__ref":"Transaction:6038a0519d844c00116e544f"},
  {"__ref":"Transaction:6038a05f9d844c00116e545e"},
  {"__ref":"Transaction:6038a06c9d844c00116e549e"},
  {"__ref":"Transaction:6038a06f9d844c00116e54a1"},
  {"__ref":"Transaction:6038a0549d844c00116e5452"},
  {"__ref":"Transaction:6038a0629d844c00116e545f"},
  {"__ref":"Transaction:6038a0699d844c00116e549a"},
  {"__ref":"Transaction:603cd5c39d844c00116f232b"},
  {"__ref":"Transaction:603ce07d9d844c00116f2342"},
  {"__ref":"Transacti

For more information about these options, please refer to the documentation:

  * Ensuring entity objects have IDs: https://go.apollo.dev/c/generating-unique-identifiers
  * Defining custom merge functions: https://go.apollo.dev/c/merging-non-normalized-objects

从看起来像这样的代码：

const UPDATE_TRANSACTION = gql`
    mutation updateTransaction($input: UpdateTransactionInput!) {
        updateTransaction(input: $input) {
            _id
            status
        }
    }
`;

export const DealBlotterGrid = ({ startDate }: DealBlotterGridPropsType): ReactElement => {
    const swedenIsoString = moment.tz(startDate, "Europe/Stockholm").format();
    const { loading, error, data } = useQuery(GET_TRANSACTIONS, {
        variables: { tradeTimestampStart: swedenIsoString },
        fetchPolicy: "network-only",
        pollInterval: 10000
    });

    const [updateTransactionStatus] = useMutation(UPDATE_TRANSACTION, {
        refetchQueries: [
            {
                query: GET_TRANSACTIONS,
                variables: { tradeTimestampStart: swedenIsoString }
            }
        ]
    });
    
    ...
    

标签： reactjstypescriptgraphqlapollo