Infinite context loop in start dev?

Hi, I have

const [MeProvider, useMe] = createContextProvider(() => {
  let [me, { mutate: setMe, refetch: refreshMe }] = createResource(async () => {
    // this runs forever
    console.log("running!")
    return (await client.user.me.get()).data;
  });
  return {
    me,
    setMe,
    refreshMe,
  };
});

const [MeProvider, useMe] = createContextProvider(() => {
  let [me, { mutate: setMe, refetch: refreshMe }] = createResource(async () => {
    // this runs forever
    console.log("running!")
    return (await client.user.me.get()).data;
  });
  return {
    me,
    setMe,
    refreshMe,
  };
});

, and I'm noticing that this createResource is running forever as fast as possible, on the server, when its in dev. I'm trying to discover the root cause of it, but it only happens in dev. I'm posting this half for help, and half to help others when I uncover the issue

10 Replies

Ping for toastOP•4mo ago

output of console.trace

message.txt

Ping for toastOP•4mo ago

Ok so its not even the resource being run forever the closure keeps getting called

function AppWrap(props: { children: JSX.Element }) {
  ...
  console.log("called");
  return (
    ....
  );
}

export default function App() {
  return (
    <MetaProvider>
      <Router
        root={(props) => (
          <>
            <Suspense>
              <AppWrap>{props.children}</AppWrap>
            </Suspense>
          </>
        )}
      >
        <FileRoutes />
      </Router>
    </MetaProvider>
  );
}

function AppWrap(props: { children: JSX.Element }) {
  ...
  console.log("called");
  return (
    ....
  );
}

export default function App() {
  return (
    <MetaProvider>
      <Router
        root={(props) => (
          <>
            <Suspense>
              <AppWrap>{props.children}</AppWrap>
            </Suspense>
          </>
        )}
      >
        <FileRoutes />
      </Router>
    </MetaProvider>
  );
}

interestingly, this too is being called forever

Madaxen86•4mo ago

Has probably something to do with the way createContextProvider is implemented? But if you are working with solid start and solid router you can use createAsync with cache helper which kind of like a global context for async data. Looks like this https://docs.solidjs.com/solid-start/building-your-application/data-loading

import { For } from "solid-js";
import { createAsync, cache } from "@solidjs/router";

type User = { name: string; email: string };

const getUsers = cache(async () => {
  const response = await fetch("https://example.com/users");
  return (await response.json()) as User[];
}, "users");

export const route = {
  load: () => getUsers(),
};

export default function Page() {
  const users = createAsync(() => getUsers());

  return <For each={users()}>{(user) => <li>{user.name}</li>}</For>;
}

import { For } from "solid-js";
import { createAsync, cache } from "@solidjs/router";

type User = { name: string; email: string };

const getUsers = cache(async () => {
  const response = await fetch("https://example.com/users");
  return (await response.json()) as User[];
}, "users");

export const route = {
  load: () => getUsers(),
};

export default function Page() {
  const users = createAsync(() => getUsers());

  return <For each={users()}>{(user) => <li>{user.name}</li>}</For>;
}

Ping for toastOP•4mo ago

Yeah unfortunately I’m locked into resources for mutational abilities though it’s possible I could proxy the cache through a store. I’ll try

Madaxen86•4mo ago

You can “mutate“ with actions which revalidate the cache. Or you can use the revalidate helper to trigger revalidation.

Ping for toastOP•4mo ago

I understand that, but it is a useless additional network callw ehn I already understand the exact mutation that will happen

Brendonovich•4mo ago

You can manually update on the client if you need with cache.set(getUser.key, value)

Ping for toastOP•4mo ago

oooh, chill how do I access the cache function?

Brendonovich•4mo ago

it's just cache from @solidjs/router

import { cache } from "@solidjs/router";

const getUser = cache(async () => {
  return (await client.user.me.get()).data;
});

const setUser = (value) => cache.set(getUser.key, value)

import { cache } from "@solidjs/router";

const getUser = cache(async () => {
  return (await client.user.me.get()).data;
});

const setUser = (value) => cache.set(getUser.key, value)

sabercoy•2mo ago

did you ever get that to work?

Gaming

Programming

Infinite context loop in start dev?