How to manually re-fetch listShape?

[cheshirrrcat]

Right now I'm using an additional parameter (refreshTrigger) as a trigger. And when I need to update the data, then I update this trigger.

useResource(
    Commission.listShape(), {
        _some_params_,     
        refreshTrigger: refreshTrigger
    }
);

I don't know how true it looks from the point of view of your library architecture.
So is there any other way to manually re-fetch it?

[ntucker]

Typically imperative fetch you can just use https://resthooks.io/docs/api/useFetcher

However, you can make your code here work simply by updating the getFetchKey to factor in refreshTrigger. https://resthooks.io/docs/api/FetchShape#getfetchkeyparams-param-string getFetchKey is used to serialize the params - thus used both in lookup for request/response, but also to determine if refetching is needed.

By default Resources use http method + url. but you can just append that if you want. This does mean it will suspend and show spinners rather than showing stale data while refetching. (as opposed to useFetcher()) though if you want that you can also useInvalidator() (in v5 of resthooks).

Custom getFetchKey:

class Comission extends Resource {
  static listShape<T extends typeof SimpleResource>(this:T) {
    const supershape = super.listShape();
    return {
      ...superShape as any,
      getFetchKey(params) { return superShape.getFetchKey(params) + params.refreshTrigger; },
      schema: [this], // this is only needed to make the types correctly based on T. if you aren't using typescript you won't need this.
    }
  }
}

[lucasdidur]

@ntucker Can you please show an example of useFetcher on detail() or list()?
I want to create a table and when a click on the button page, call the resource with an updated param page=2

[ntucker]

@lucasdidur In that case you don't need to customize the Endpoint, you simply need to keep track of the page. If not using history/location, here's an example with useState():

const [page, setPage] = useState(0);
const listofThings = useResource(MyResource.list(), { page });

return (
  <div>
    <button onClick={() => setPage(page => page-1)}>last page</button>
    <button onClick={() => setPage(page => page+1)}>next page</button>
  </div>
);

[ntucker]

@lucasdidur closing for now. Please open a new issue if you're still having trouble!