[SOLVED] How to use a hook on page load and recall after a function call?

How to use a hook on page load and recall after a function call?

I am using a hook from an SDK on page load that looks like this:

import { useOwnedAssets } from 'somesdk/react'
const { data, isLoading, error } = useOwnedAssets(foo, bar)

I call a function updateAssets() which affects the owned assets.

How can I call the hook on component load and reevaluate or recall the useOwnedAssets hook at the end of the updateAssets() function?

For component load I simply use:

const { data: ownedNFTs, isLoading, error } = useOwnedAssets(foo, bar)

but how to also call after calling updateAssets?

Solution

It looks like this library uses @tanstack/react-query behind the scenes to manage http calls. You should be able to destructure the refetch function from the useOwnedNFTs hook and use that to refetch the data.

You should be able to do this:

                                             v
const { data: ownedNFTs, isLoading, error, refetch } = useOwnedAssets(foo, bar)

You can check out the docs for the useQuery hook from react-query which is what the useOwnedNFTs hook behind the scenes is. https://tanstack.com/query/v4/docs/react/reference/useQuery