Effect CommunityEC
Effect Community•2mo ago•
1 reply
Florian

Implementing Cursor Pagination with Effect-Atom in a React App

I have an HttpApi with cursor pagination

HttpApiGroup.make("identity").add(
  HttpApiEndpoint.get("listOrganizations", "/organizations")
    .setUrlParams(
      Schema.Struct({
        cursor: Schema.optional(Schema.NonEmptyString),
        limit: Schema.optional(Schema.NumberFromString),
      }),
    )
    .addSuccess(PaginationResponse(Organization)),
);


Now I in my react app, I would like to implement a table with pagination and I would like to "cache" the "pages".

Coming from reqct query, I would have constructed the query key from the cursor and limit url params.

How would this be done with effect-atom? Is better to use an atom family or the http api integration? With the latter I have no idea how to put the url params into the reactivity keys, but maybe I'm blind by now.
Was this page helpful?