How to refetch a "use server" function / RPC?

async function pingServers() {
  "use server";
  let status = await Monitor.run(); // this is a class that runs a node.js module `tcp-ping` and returns a map of servers and their ping-able status
  console.log(status); // see this log in the server console
  return status;
}

const cachedPing = cache(pingServers, "mycache")

export default function Home() {
  const status = createAsync(cachedPing)
  // What can I do to re-fetch this clientside with a setTimeout / setInterval?
  
  return (
    <main class="mx-auto">
      <pre class="my-4">
        {JSON.stringify(status(), null, 2)}
      </pre>
    </main>
  );
}

async function pingServers() {
  "use server";
  let status = await Monitor.run(); // this is a class that runs a node.js module `tcp-ping` and returns a map of servers and their ping-able status
  console.log(status); // see this log in the server console
  return status;
}

const cachedPing = cache(pingServers, "mycache")

export default function Home() {
  const status = createAsync(cachedPing)
  // What can I do to re-fetch this clientside with a setTimeout / setInterval?
  
  return (
    <main class="mx-auto">
      <pre class="my-4">
        {JSON.stringify(status(), null, 2)}
      </pre>
    </main>
  );
}

async function pingServers() {
  "use server";
  let status = await Monitor.run(); // this is a class that runs a node.js module `tcp-ping` and returns a map of servers and their ping-able status
  console.log(status); // see this log in the server console
  return status;
}

/*
Initial page load has the expected results from the RCP call, 
but the setTimeout refetch() causes a "TypeError Failed to fetch" with the following browser call stack UI: 
    createRequest        server-runtime.jsx:85:10
    fetchServerFunction  server-runtime.jsx:99:123
(and WHY is the displayed callstack set to user-select: none?!)

Note: The Server console logs the expected status in the pingServers() function before failing with the following message:
  file:///C:/Workspace/home-services-start/node_modules/solid-js/dist/server.js:525   
        ctx.resources[id].data = res;
                               ^
  TypeError: Cannot set properties of undefined (setting 'data')
*/
export default function Home() {
  const [status, { mutate, refetch}] = createResource(pingServers)
  setTimeout(() => {
    console.log("refetching status")
    refetch()
  }, 5000)
  return (
    <main class="mx-auto">
      <pre class="my-4">
        {JSON.stringify(status(), null, 2)}
      </pre>
    </main>
  );
}

async function pingServers() {
  "use server";
  let status = await Monitor.run(); // this is a class that runs a node.js module `tcp-ping` and returns a map of servers and their ping-able status
  console.log(status); // see this log in the server console
  return status;
}

/*
Initial page load has the expected results from the RCP call, 
but the setTimeout refetch() causes a "TypeError Failed to fetch" with the following browser call stack UI: 
    createRequest        server-runtime.jsx:85:10
    fetchServerFunction  server-runtime.jsx:99:123
(and WHY is the displayed callstack set to user-select: none?!)

Note: The Server console logs the expected status in the pingServers() function before failing with the following message:
  file:///C:/Workspace/home-services-start/node_modules/solid-js/dist/server.js:525   
        ctx.resources[id].data = res;
                               ^
  TypeError: Cannot set properties of undefined (setting 'data')
*/
export default function Home() {
  const [status, { mutate, refetch}] = createResource(pingServers)
  setTimeout(() => {
    console.log("refetching status")
    refetch()
  }, 5000)
  return (
    <main class="mx-auto">
      <pre class="my-4">
        {JSON.stringify(status(), null, 2)}
      </pre>
    </main>
  );
}

async function fetchData(source, { value, refetching }) {
  return await pingServers()
}
...
const status = createResource(fetchData)

async function fetchData(source, { value, refetching }) {
  return await pingServers()
}
...
const status = createResource(fetchData)

async function fetchData(source, { value, refetching }) {
  return await pingServers()
}
...
const [status, { mutate, refetch}] = createResource(fetchData)

async function fetchData(source, { value, refetching }) {
  return await pingServers()
}
...
const [status, { mutate, refetch}] = createResource(fetchData)

//route index
type Ping = Awaited<ReturnType<typeof pingServers>>
const PingContext = createContext<Ping>();
export const usePingContext = () => useContext(PingContext)
...
export default Home = () => {
  ...
  return (
    <PingContext.Provider value={status()}>
      ... the rest of the stuff
      // referencing status() in this component works fine and updates as expected when the cache is invalidated
    </PingContext.Provider>
  )
}

// component file
import usePingContext
...
const MyComponent = ()=>{
  const PingStatus = usePingContext()
  return (
    ... 
    // PingStatus is always undefined
  )
}

//route index
type Ping = Awaited<ReturnType<typeof pingServers>>
const PingContext = createContext<Ping>();
export const usePingContext = () => useContext(PingContext)
...
export default Home = () => {
  ...
  return (
    <PingContext.Provider value={status()}>
      ... the rest of the stuff
      // referencing status() in this component works fine and updates as expected when the cache is invalidated
    </PingContext.Provider>
  )
}

// component file
import usePingContext
...
const MyComponent = ()=>{
  const PingStatus = usePingContext()
  return (
    ... 
    // PingStatus is always undefined
  )
}

import { 
  PINGCACHE, // string value to share the cache name
  Servers, // Root Component from this component
  pingStatus, // the createAsync signal
 } from "~/components/Servers";

import { 
  PINGCACHE, // string value to share the cache name
  Servers, // Root Component from this component
  pingStatus, // the createAsync signal
 } from "~/components/Servers";