Combine mutation call custom hook to revalidate

[pke]

What is the best way to include mutation handling and swr cache revalidation in a custom hook?

I am currently using this:

export function useOrder() {
  const { session } = useSession()
  const { data: order, error, mutate, revalidate } = useSWR<Order>(() => `/order/${session.orderId}`, get)

  const addProduct = async (productId: string, quantity: number) => {
    await post("/order/item", {
      productId, quantity,
    })
    revalidate()
  }

  const removeItem = async (itemItem: string) => {
    await del("/order/item/" + itemItem)
    revalidate()
  }

  return {
    order,
    error,
    loading: !order && !error,
    addProduct,
    removeItem,
    mutate,
  }
}

It works, but I wonder if this is the recommended way to do that?

It also create a rather unstable hook, as the 2 addProduct and removeItem are not stable in a way they could be used as dependencies for hooks because they are recreated each time the hook is called.

[sergiodxa]

To avoid the problem of using your addProduct and removeItem functions inside another hook you need to wrap them in React.useCallback.

I also recommend you to avoid using revalidate, it's going to be deprecated, instead, use mutate, if you don't pass anything is the same as a revalidation.

[pke]

what would be the dependencies of those functions as callbacks?

[sergiodxa]

Whatever you are using inside them from the outside (not args), in your case that will be revalidate (or mutate)

[pke]

but is mutate stable? I had the impression it is not. I got a infinite loop when I used it as a dependency for an useEffect

[sergiodxa]

Mutate it's 100% stable, I have been using it as dependency in an effect without issues in the pass, could you share a CodeSandbox to replicate your issue?

[pke]

I'll try to setup a sandbox.

I realised now that my Order is not refreshed when the session it depends on, changes.

const { session } = useSession()
const { data: order} = useSWR<Order>(() => [`/order/${session.orderId}`, sessionId], get)

I can verify via log outputs that the session indeed changes (after login and after logout). However after login, the order hook is not triggered, even though the orderId and sessionId have changed.