query icon indicating copy to clipboard operation
query copied to clipboard

Add Mechanism to Refetch in `createMutatorStore` Without a Loading State

Open martinmckenna opened this issue 1 year ago • 2 comments

Hi I have a use case like this:

const queryKey = "things"

export const $things = createFetcherStore(queryKey, {
      fetcher: () =>
        getThings().then((response) => response.data),
    })

export const $createThing = createMutatorStore<Payload>(async ({ data, invalidate }) => {
  invalidate(queryKey);
  return createThing(payload);
});

I would really like a way for createMutatorStore to be able to call invalidate to trigger a refetch but without setting $things.loading back to true. I want it to replace the old data with the new data but do it without clearing everything out before because it's fine to show stale data until the new stuff comes back

Either that, or expose a refetch callback on the createFetcherStore return value, so that we can call it from the react component

This seems pretty standard in libraries like react query

martinmckenna avatar Jan 29 '24 17:01 martinmckenna

ah nvm I guess you can just say if (!data && loading) as the condition for first load

martinmckenna avatar Jan 29 '24 21:01 martinmckenna

@martinmckenna Yep, you guessed it right! I suppose, it'd be better to update the README to reflect a better approach then if (loading) return <>loading</>. I already use a different approach in all my SB demos.

dkzlv avatar Jan 30 '24 18:01 dkzlv