[Feature] reconstruct Cache, Cacheable, useRead, Read

[manudeli]

          🚀🚀🚀 Let's improve after merging

Below is our imagination with @SEOKKAMONI

// pseudo code below
import { Cache, useRead, Read } from '@suspensive/cache'

const serverCache = new Cache({
  user: (userId: number) => ({
    fn: () => api.user(userId),
    interval: 2000
  }),
  users: () => ({
    fn: () => api.users()
  })
})

const Child = () => {
  const { data: users, invalidate } = useRead(serverCache.users())
  const serverCacheUsers = useRead(serverCache.users())

  serverCacheUsers.invaliate()
  serverCacheUsers.data

  const { data: user } = useRead({
    ...serverCache.user(1),
    interval: 3000 // CacheOptions
  })

  Cache.invalidate(serverCache.users())
  Cache.invalidate(serverCache.user(1))

  return (
    <Read {...serverCache.user(1)} interval={2000}>
      {({ data: user }) => user.name}
    </Read>
  )
}

Originally posted by @manudeli in https://github.com/toss/suspensive/pull/1224#pullrequestreview-2247996262

[coauthors[bot]]

People can be co-author:

Candidate	Reasons	Count	Add this as commit message
@manudeli	https://github.com/toss/suspensive/issues/1225#issuecomment-2300599440 https://github.com/toss/suspensive/issues/1225#issuecomment-2333620771 https://github.com/toss/suspensive/issues/1225	3	Co-authored-by: manudeli <61593290+manudeli@users.noreply.github.com>
@ojj1123	https://github.com/toss/suspensive/issues/1225#issuecomment-2333522553	1	Co-authored-by: ojj1123 <33178048+ojj1123@users.noreply.github.com>
@SEOKKAMONI	https://github.com/toss/suspensive/issues/1225#issuecomment-2335049584	1	Co-authored-by: SEOKKAMONI <102217654+SEOKKAMONI@users.noreply.github.com>

[manudeli]

Related https://github.com/toss/suspensive/issues/1191

[ojj1123]

I have some question about @suspensive/cache.

I don't know the background why this package is made. But after I read a description on README.md and source code of this package briefly, I was wondering some problem that this package want to solve. Reading source code(Cache.ts), I feel like that it reads, does something(e.g. invalidate) or manages the lifecycle of cache integrating with React.suspense. So what is the difference from roles of tanstack/query? Of course, tanstack/query have a role of managing server states, but it provides APIs that can manage caches. I'm just curious!

[manudeli]

In my opinion, It would be better that we request @SEOKKAMONI's reply

[SEOKKAMONI]

@ojj1123 Compared to tanstack/query, suspensive/cache doesn’t just stop at caching server state. The future I envision for suspensive/cache is to make it easier to cache not only server state but also various elements like images, movies, and more, ultimately creating meaningful experiences for users.

Furthermore, tanstack/query is designed for browsers and, as far as I know, does not work in node environments. My goal for for suspensive/cache is to remove the dependency on React and develop it further so that caching can be easy and convenient even in Node environments.

I'm sorry for the delayed response, and thank you so much for your great question!