SolidJS•2mo ago

revalidate() Not Working As Expected

I'm fetching data from Supabase and using their Realtime feature so I can see live updates. To do that I'm using cache(), createAsync(), and revalidate() It looks like this: cache function:

const getNotes = cache(async () => {
  "use server";
  // get data
  const { data } = await supabase.from("notes").select();
  // return data
  return data;
}, "notes");

const getNotes = cache(async () => {
  "use server";
  // get data
  const { data } = await supabase.from("notes").select();
  // return data
  return data;
}, "notes");

createAsync function:

const notes = createAsync(() => getNotes());

const notes = createAsync(() => getNotes());

Here's where I'm confused. revalidate() works no matter what value I pass it. So all of these options will revalidate the notes Signal from createAsync. 1. revalidate() 2. revalidate("notes") 3. revalidate("some random string") I only expected option #2 to work. What am I missing? Thanks, Chris

8 Replies

peerreynders•2mo ago

Case 1: Works as intended; undefined hits all known caches. Case 3 is the strange one.

GitHub

solid-router/src/data/cache.ts at 57847624fb673003f6f0d8261ca7352ff...

A universal router for Solid inspired by Ember and React Router - solidjs/solid-router

peerreynders•2mo ago

Are you on @solidjs/router 0.13.3 released 8 days ago?

ChrisThornham•2mo ago

I'm on 0.13.2 Was Case 3 a known bug with 0.13.2? @peerreynders I'd also like to thank you for talking me into learning about cache(), createAsync(). It eliminates so much code! Working with real-time updates is much easier.

peerreynders•2mo ago

Not that I'm aware of; it's just that the source is from April 30; so if anything earlier was fixed reviewing the recent code wouldn't help.

peerreynders•2mo ago

Are you sure the revalidate is doing it because a actions have a response helper that could do something similar (i.e. try removing the revalidate entirely).

GitHub

solid-router/src/data/action.ts at e773947b85ac78281816e86621a2cdb6...

A universal router for Solid inspired by Ember and React Router - solidjs/solid-router

ChrisThornham•2mo ago

If I remove revalidate() the update stops working. So I'm quite sure revalidate is allowing the realtime updates to work.

peerreynders•2mo ago

A StackBlitz example to demonstrate cache isolation with client side cache usage. Each button can be observed to revalidate in isolation. Then a fresh SolidStart installation with the following modifications:

// file: src/api.ts
import { cache } from '@solidjs/router';
import { get1st, get2nd } from './server/api';

const getFirst = cache(get1st, 'first');
const getSecond = cache(get2nd, 'second');

export { getFirst, getSecond };

// file: src/api.ts
import { cache } from '@solidjs/router';
import { get1st, get2nd } from './server/api';

const getFirst = cache(get1st, 'first');
const getSecond = cache(get2nd, 'second');

export { getFirst, getSecond };

"use server"
// file: src/server/api.ts

let first = 0;
const get1st = () => {
  const value = first;
    console.log('first', value);
  first += 1;
  return Promise.resolve(value);
};

let second = 0;
const get2nd = () => {
  const value = second;
    console.log('second', value);
  second += 1;
  return Promise.resolve(value);
};

export { get1st, get2nd };

/*
    Note: separate instances of this module seem to be instantiated
    during SSR and later server function invocations.

    That is why the first click doesn't seem to update anything.
    The very first server function invocation seems to create its own module instance
     so the "first" value returned is "0" (the value already placed on the page via SSR).
 */

"use server"
// file: src/server/api.ts

let first = 0;
const get1st = () => {
  const value = first;
    console.log('first', value);
  first += 1;
  return Promise.resolve(value);
};

let second = 0;
const get2nd = () => {
  const value = second;
    console.log('second', value);
  second += 1;
  return Promise.resolve(value);
};

export { get1st, get2nd };

/*
    Note: separate instances of this module seem to be instantiated
    during SSR and later server function invocations.

    That is why the first click doesn't seem to update anything.
    The very first server function invocation seems to create its own module instance
     so the "first" value returned is "0" (the value already placed on the page via SSR).
 */

It demonstrates the same behaviour (nothing changes with node .output/server/index.mjs on the production build). So there is something funky going on with your setup.

peerreynders

StackBlitz

solidjs/router cache isolation - StackBlitz

external.ts holds a link object that flipper.ts sends NavigationEvents to which are forwarded to the root component in app.tsx

ChrisThornham•2mo ago

Thank you @peerreynders I'll dig through this!

Gaming

Programming

revalidate() Not Working As Expected