How to force refetch the entire node in Relay?

Question

Suppose that we have this mutation:

const [addCryptoAddress] =
  useMutation(graphql`
    mutation useCrypto_AddCryptoWalletAddressMutation(
      $input: AddCryptoAddressInput!
    ) {
      addCryptoAddress(input: $input) {
        userAccount {
          cryptoCurrencyAddresses {
            count
            edges {
              node {
                id
                address
              }
            }
          }
        }
        errors {
          message
        }
      }
    }
  `);

If successful, a new CryptoCurrencyAddresses will be available under UserAccount.

Now suppose that somewhere else in the code we have a lazyLoadQuery that fetches these addresses, e.g.

const { visitor } = useLazyLoadQuery<ManualPayoutMachineContextQuery>(
  graphql`
    query ManualPayoutMachineContextQuery {
      visitor {
        userAccount {
          cryptoCurrencyAddresses {
            edges {
              node {
                id
                address
                canDelete
                currency
                isDefault
                label
              }
            }
          }
        }
      }
    }
  `,
  {}
);

However, note that this query references additional fields that are not mentioned in the mutation. The result is that all unmentioned fields are undefined immediately after the mutation, i.e.

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,
    };
  });

Produces:

[
  {
    address: '0xc0ffee254729296a45a3885639AC7E10F9d54979',
    canDelete: undefined,
    currency: undefined,
    id: 'WyJDcnlwdG9DdXJyZW5jeUFkZHJlc3MiLDIwMjE3NF0=',
    isDefault: undefined,
    label: undefined,
  }
]

Apart from listing every overlapping field in the mutation, is there a way to force all queries that depend on this data to reload when they detect new data?

score 1 · Answer 1 · answered Nov 01 '22 at 17:34

You can set fetchPolicy as store-and-network, like this:

const { visitor } = useLazyLoadQuery<ManualPayoutMachineContextQuery>(
  graphql`
    query ManualPayoutMachineContextQuery {
      visitor {
        userAccount {
          cryptoCurrencyAddresses {
            edges {
              node {
                id
                address
                canDelete
                currency
                isDefault
                label
              }
            }
          }
        }
      }
    }
  `,
  {},
  {
    fetchPolicy: 'store-and-network',
  }
);

The store-and-network will use the data of the store and always do a network request without making regardless.

How to force refetch the entire node in Relay?

1 Answers1