S
SolidJS•3w ago
Hussein

how to trigger <Suspense> on revalidate?

in tanstack query, you can use resetQueries to do that, what is the solid router equivalent of that?
17 Replies
Madaxen86
Madaxen86•3w ago
Suspense is triggered while calling the accessor of a createAsync which is in a transition. So calling revalidate or any of the other response helpers (reload, redirect, json) inside an action it will also cause the createAsync to refetch an so trigger the Suspense as long as you access the value inside a Suspense boundary and don’t use .latest on the accessor. If you provide a query key(s) to the helpers they will only revalidate the query matching the key(s), if you provide undefined they will revalidate all queries.
Brendonovich
Brendonovich•3w ago
Try doing query.delete(someQuery.key)
Hussein
HusseinOP•3w ago
async function sleep(ms: number) {
  await new Promise((r) => setTimeout(r, ms));
}

const getData = query(async () => {
  await sleep(1000);

  return { hello: "world" };
}, "data");

export default function Home() {
  const data = createAsync(() => getData());

  return (
    <main>
      <Title>Hello World</Title>
      <h1>Hello world!</h1>
      <Suspense fallback={<p>Loading...</p>}>{data()?.hello}</Suspense>
      <button onClick={() => query.delete(getData.key)}>Refetch</button>
    </main>
  );
}
async function sleep(ms: number) {
  await new Promise((r) => setTimeout(r, ms));
}

const getData = query(async () => {
  await sleep(1000);

  return { hello: "world" };
}, "data");

export default function Home() {
  const data = createAsync(() => getData());

  return (
    <main>
      <Title>Hello World</Title>
      <h1>Hello world!</h1>
      <Suspense fallback={<p>Loading...</p>}>{data()?.hello}</Suspense>
      <button onClick={() => query.delete(getData.key)}>Refetch</button>
    </main>
  );
}
this? did not work i deleted the imports so the code is smaller but they're known
Brendonovich
Brendonovich•3w ago
do delete then revalidate idk if it'll work but in theory it should leave no stale data for the createAsync
Hussein
HusseinOP•3w ago
did not work either 
<button
  onClick={async () => {
    query.delete(getData.key);
    await revalidate(getData.key);
  }}
>
  Refetch
</button>
<button
  onClick={async () => {
    query.delete(getData.key);
    await revalidate(getData.key);
  }}
>
  Refetch
</button>
query.delete(): boolean its returning false does that mean its not deleting?
Brendonovich
Brendonovich•3w ago
i think so
Hussein
HusseinOP•3w ago
ok so, no way? i tried using tanstack query but i didn't know how to setup it correctly so it was refetching on the client after initial ssr :( i think its important to show loading on revalidate just as much as initial do you have any tanstack query + solidstart template i can look at?
Madaxen86
Madaxen86•3w ago
I’m afk, so I can’t really try things. With some more effort you can create an action which just returns reload()
peerreynders
peerreynders•3w ago
The fallback isn't showing because revalidate is triggering a transition. Use pending to show a loading indicator. 
// file: src/routes/about.tsx on the "basic" SolidStart TS template
import { Suspense, useTransition } from 'solid-js';
import { Title } from '@solidjs/meta';
import { createAsync, query, revalidate } from '@solidjs/router';

const getData = query(async () => {
  await new Promise((r) => setTimeout(r, 1000));

  return { hello: 'world' };
}, 'data');

export default function About() {
  const [pending] = useTransition();
  const data = createAsync(() => getData());

  return (
    <main>
      <Title>Hello World</Title>
      <h1>Hello world!</h1>
      <Suspense fallback={<p>Loading...</p>}>{data()?.hello}</Suspense>
      <button onClick={() => revalidate(getData.key)}>Refetch</button>
      <p>{`Transition: ${pending() ? 'pending' : 'complete'}`}</p>
    </main>
  );
}
// file: src/routes/about.tsx on the "basic" SolidStart TS template
import { Suspense, useTransition } from 'solid-js';
import { Title } from '@solidjs/meta';
import { createAsync, query, revalidate } from '@solidjs/router';

const getData = query(async () => {
  await new Promise((r) => setTimeout(r, 1000));

  return { hello: 'world' };
}, 'data');

export default function About() {
  const [pending] = useTransition();
  const data = createAsync(() => getData());

  return (
    <main>
      <Title>Hello World</Title>
      <h1>Hello world!</h1>
      <Suspense fallback={<p>Loading...</p>}>{data()?.hello}</Suspense>
      <button onClick={() => revalidate(getData.key)}>Refetch</button>
      <p>{`Transition: ${pending() ? 'pending' : 'complete'}`}</p>
    </main>
  );
}
Hussein
HusseinOP•3w ago
what is reload? this worked. thanks! but i'm still interested in more ideas its actually better then retriggering <Suspense> because that might hide old data which is worse UX show something instead of nothing
Madaxen86
Madaxen86•3w ago
Hussein
HusseinOP•3w ago
"Reload is a response helper built on top of revalidate. It will receive a cache key, or an array of cache keys, to invalidate those queries, and cause them to fire again." it doesn't say what it adds on top of revalidate
peerreynders
peerreynders•3w ago
Actions will revalidate all active querys. reload makes it selective; it also opts out of single filight mutation. revalidate is used outside of actions. Here: https://solid-movies.app/movie pending activates a CSS animation for the loading line at the top of the page.
Hussein
HusseinOP•3w ago
such a cool app! as i added more stuff it started showing pending because of updates unrelated to the query
peerreynders
peerreynders•3w ago
pending is global so it's best used in the top level layout.
Hussein
HusseinOP•3w ago
its showing in the same page, i have no layouts ._.
peerreynders
peerreynders•3w ago
// file: src/components/global-loader.tsx
// from: https://github.com/solidjs/solid-start/blob/2d75d5fedfd11f739b03ca34decf23865868ac09/archived_examples/movies/src/components/GlobalLoader.tsx

import { Show, useTransition } from 'solid-js';
import { useIsRouting } from '@solidjs/router';
import './global-loader.css';

function GlobalLoader() {
  const isRouting = useIsRouting();
  const [isInTransition] = useTransition();
  const isVisible = () => isRouting() || isInTransition();
  return (
    <Show when={isVisible()}>
      <div class="c-global-loader">
        <div></div>
      </div>
    </Show>
  );
}

export { GlobalLoader };
// file: src/components/global-loader.tsx
// from: https://github.com/solidjs/solid-start/blob/2d75d5fedfd11f739b03ca34decf23865868ac09/archived_examples/movies/src/components/GlobalLoader.tsx

import { Show, useTransition } from 'solid-js';
import { useIsRouting } from '@solidjs/router';
import './global-loader.css';

function GlobalLoader() {
  const isRouting = useIsRouting();
  const [isInTransition] = useTransition();
  const isVisible = () => isRouting() || isInTransition();
  return (
    <Show when={isVisible()}>
      <div class="c-global-loader">
        <div></div>
      </div>
    </Show>
  );
}

export { GlobalLoader };
/* file: src/components/global-loader.css  */
/* parent element of indicator in it's own */
/* stacking context positioned in relation */
/* to the viewport */
.c-global-loader {
  height: 4px;
  width: 100%;
  display: flex;
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
}

/* faint lower boundary for indicator */
.c-global-loader::after {
  display: block;
  content: ' ';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.2);
}

/* animated "progress" fill for indicator   */
/* in its own stacking context, positioned */
/* in relation to its (positioned) parent   */
.c-global-loader > div {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  opacity: 0;
  /*
    10 second duration to cover worst(?) case scenario 
    350ms delay so it won't appear for fast transitions
  */
  transition: none;
  animation: 10s ease-out 350ms forwards Indeterminate;
  background: #2196f3;
}

/*
  cover the first 75% in the first second (10%), 
  leaving the remaining 25% for the rest 
 */
@keyframes Indeterminate {
  0% {
    opacity: 1;
    transform: translateX(-100%);
  }
  10% {
    opacity: 1;
    transform: translateX(-25%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* file: src/components/global-loader.css  */
/* parent element of indicator in it's own */
/* stacking context positioned in relation */
/* to the viewport */
.c-global-loader {
  height: 4px;
  width: 100%;
  display: flex;
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
}

/* faint lower boundary for indicator */
.c-global-loader::after {
  display: block;
  content: ' ';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.2);
}

/* animated "progress" fill for indicator   */
/* in its own stacking context, positioned */
/* in relation to its (positioned) parent   */
.c-global-loader > div {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  opacity: 0;
  /*
    10 second duration to cover worst(?) case scenario 
    350ms delay so it won't appear for fast transitions
  */
  transition: none;
  animation: 10s ease-out 350ms forwards Indeterminate;
  background: #2196f3;
}

/*
  cover the first 75% in the first second (10%), 
  leaving the remaining 25% for the rest 
 */
@keyframes Indeterminate {
  0% {
    opacity: 1;
    transform: translateX(-100%);
  }
  10% {
    opacity: 1;
    transform: translateX(-25%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
// file: src/app.tsx
import { MetaProvider, Title } from '@solidjs/meta';
import { Router } from '@solidjs/router';
import { FileRoutes } from '@solidjs/start/router';
import { Suspense } from 'solid-js';
import { GlobalLoader } from '~/components/global-loader';
import './app.css';

export default function App() {
  return (
    <Router
      root={(props) => (
        <MetaProvider>
          <Title>SolidStart - Basic</Title>
          <GlobalLoader />
          <a href="/">Index</a>
          <a href="/about">About</a>
          <Suspense>{props.children}</Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}
// file: src/app.tsx
import { MetaProvider, Title } from '@solidjs/meta';
import { Router } from '@solidjs/router';
import { FileRoutes } from '@solidjs/start/router';
import { Suspense } from 'solid-js';
import { GlobalLoader } from '~/components/global-loader';
import './app.css';

export default function App() {
  return (
    <Router
      root={(props) => (
        <MetaProvider>
          <Title>SolidStart - Basic</Title>
          <GlobalLoader />
          <a href="/">Index</a>
          <a href="/about">About</a>
          <Suspense>{props.children}</Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}
// file: src/routes/about.tsx
import { Show, Suspense } from 'solid-js';
import { Title } from '@solidjs/meta';
import { createAsync, query, revalidate } from '@solidjs/router';

import type {
  RouteDefinition,
  RoutePreloadFuncArgs,
  RouteSectionProps,
} from '@solidjs/router';

const time = () => {
  const iso = new Date().toISOString();
  return iso.slice(iso.indexOf('T') + 1, -1);
};

const asyncData = query(async () => {
  await new Promise((r) => setTimeout(r, 2000));
  const hello = `world ${time()}`;
  console.log(hello);
  return { hello };
}, 'async-data');

export const route = {
  preload(_args: RoutePreloadFuncArgs) {
    // start but do not await
    asyncData();
  },
} satisfies RouteDefinition;

export default function About(_props: RouteSectionProps) {
  const data = createAsync(() => asyncData());

  return (
    <main>
      <Title>About</Title>
      <h1>About</h1>
      <Suspense fallback={<p>Loading...</p>}>
        <Show when={data()}>{(data) => <p>{data().hello}</p>}</Show>
      </Suspense>
      <button onClick={() => revalidate(asyncData.key)}>Refetch</button>
    </main>
  );
}
// file: src/routes/about.tsx
import { Show, Suspense } from 'solid-js';
import { Title } from '@solidjs/meta';
import { createAsync, query, revalidate } from '@solidjs/router';

import type {
  RouteDefinition,
  RoutePreloadFuncArgs,
  RouteSectionProps,
} from '@solidjs/router';

const time = () => {
  const iso = new Date().toISOString();
  return iso.slice(iso.indexOf('T') + 1, -1);
};

const asyncData = query(async () => {
  await new Promise((r) => setTimeout(r, 2000));
  const hello = `world ${time()}`;
  console.log(hello);
  return { hello };
}, 'async-data');

export const route = {
  preload(_args: RoutePreloadFuncArgs) {
    // start but do not await
    asyncData();
  },
} satisfies RouteDefinition;

export default function About(_props: RouteSectionProps) {
  const data = createAsync(() => asyncData());

  return (
    <main>
      <Title>About</Title>
      <h1>About</h1>
      <Suspense fallback={<p>Loading...</p>}>
        <Show when={data()}>{(data) => <p>{data().hello}</p>}</Show>
      </Suspense>
      <button onClick={() => revalidate(asyncData.key)}>Refetch</button>
    </main>
  );
}

Did you find this page helpful?