Solid Cache

hey @lxsmnsyc sorry to bother you. I´ve been trying your library, am I doing this correctly:

  const [queryParams, setQueryParams] = useSearchParams()

  const { data: bookings, isFetching } = createCachedResource({
    source: () => queryParams,
    key: ({ page, query }) => [page, query],
    get: async () => {
      const searchQuery =
        queryParams.query === undefined ? '' : queryParams.query
      const currentPage = queryParams.page ? Number(queryParams.page) : 1

      return await supabaseClient
        .from('bookings')
        .select(
          'booking_start, booking_end, reference, created_at, products!inner(product_name, product_id)',
          { count: 'exact' },
        )
        .eq('tenant_id', user?.user_metadata.tenant_id)
        .ilike('reference', '%' + searchQuery + '%')
        .range(
          currentPage * pageSize() - pageSize(),
          currentPage * pageSize() - 1,
        )
        .order('reference', { ascending: true })
    },
  })

  const [queryParams, setQueryParams] = useSearchParams()

  const { data: bookings, isFetching } = createCachedResource({
    source: () => queryParams,
    key: ({ page, query }) => [page, query],
    get: async () => {
      const searchQuery =
        queryParams.query === undefined ? '' : queryParams.query
      const currentPage = queryParams.page ? Number(queryParams.page) : 1

      return await supabaseClient
        .from('bookings')
        .select(
          'booking_start, booking_end, reference, created_at, products!inner(product_name, product_id)',
          { count: 'exact' },
        )
        .eq('tenant_id', user?.user_metadata.tenant_id)
        .ilike('reference', '%' + searchQuery + '%')
        .range(
          currentPage * pageSize() - pageSize(),
          currentPage * pageSize() - 1,
        )
        .order('reference', { ascending: true })
    },
  })

I'm not really sure how key works, I see it's string based, but was wondering how to effectively use this correctly

34 Replies

lxsmnsyc•2y ago

Key is for caching purposes. It allows solid cache where to save/load a resolved resource - source doesn't do anything here; you aren't tracking anything. - key must be string (as mentioned) You should invert your key as source then produce a string from the source

Casacobra•2y ago

@lxsmnsyc something like this:

  const { data: bookings, isFetching } = createCachedResource({
    source: () => [queryParams.page, queryParams.query],
    key: ([page, query]) => `/page=${page}&query=${query}`,
    get: async ([page, query]) => {
      const searchQuery = query === undefined ? '' : query
      const currentPage = page ? Number(page) : 1

      return await supabaseClient
        .from('bookings')
        .select(
          'booking_start, booking_end, reference, created_at, products!inner(product_name, product_id)',
          { count: 'exact' },
        )
        .eq('tenant_id', user?.user_metadata.tenant_id)
        .ilike('reference', '%' + searchQuery + '%')
        .range(
          currentPage * pageSize() - pageSize(),
          currentPage * pageSize() - 1,
        )
        .order('reference', { ascending: true })
    },
  })

  const { data: bookings, isFetching } = createCachedResource({
    source: () => [queryParams.page, queryParams.query],
    key: ([page, query]) => `/page=${page}&query=${query}`,
    get: async ([page, query]) => {
      const searchQuery = query === undefined ? '' : query
      const currentPage = page ? Number(page) : 1

      return await supabaseClient
        .from('bookings')
        .select(
          'booking_start, booking_end, reference, created_at, products!inner(product_name, product_id)',
          { count: 'exact' },
        )
        .eq('tenant_id', user?.user_metadata.tenant_id)
        .ilike('reference', '%' + searchQuery + '%')
        .range(
          currentPage * pageSize() - pageSize(),
          currentPage * pageSize() - 1,
        )
        .order('reference', { ascending: true })
    },
  })

lxsmnsyc•2y ago

yes! I think this should work I would recommend though, adding a unique prefix to that string Because solid-cache uses the same single cache for every boundary, and so it may conflict if you have too similar key factories

Casacobra•2y ago

So, the key is basically what gets stored in cache?

lxsmnsyc•2y ago

no, it's the "key" to the data stored in cache imagine a Map

Casacobra•2y ago

i see!

source: () => [queryParams.page, queryParams.query],
    key: ([page, query]) => `bookings:${page}${query}`,

source: () => [queryParams.page, queryParams.query],
    key: ([page, query]) => `bookings:${page}${query}`,

lxsmnsyc•2y ago

yes that should work too

Casacobra•2y ago

we need the source values in the key, right?

lxsmnsyc•2y ago

basically source is for tracking what you return in source is passed to the key and getter key produces the key, get produces the value

Casacobra•2y ago

got it! Thanks my man

lxsmnsyc•2y ago

let me know if there are any issues

Casacobra•2y ago

@lxsmnsyc thanks my man. Question, is there anyway I can see where this cached data is being stored, just for debugging reasons? I tried using solid devtools, but no luck

lxsmnsyc•2y ago

hmmm, yeah I don't think it can be inspected in solid-devtools there's not much right now

Casacobra•2y ago

even if i can console.log the data

thetarnav•2y ago

how do you store it though? is something missing in the devtools?

Gaming

Programming

Solid Cache