Saving Results of routeData() into a Context

What is the proper way to save the results of routeData() into a context? So, here's my setup. Here's my root.

<Body class="bg-primary h-min w-screen">
        <div class="text-center mx-auto text-spring pt-4 px-0 w-full">
          <Suspense>
            <ErrorBoundary>
              <Navigation />
              <IslandsProvider>
                <Routes>
                  <FileRoutes />
                </Routes>
              </IslandsProvider>
              <Footer />
            </ErrorBoundary>
          </Suspense>
          <Scripts />
        </div>
      </Body>

<Body class="bg-primary h-min w-screen">
        <div class="text-center mx-auto text-spring pt-4 px-0 w-full">
          <Suspense>
            <ErrorBoundary>
              <Navigation />
              <IslandsProvider>
                <Routes>
                  <FileRoutes />
                </Routes>
              </IslandsProvider>
              <Footer />
            </ErrorBoundary>
          </Suspense>
          <Scripts />
        </div>
      </Body>

And, in my route component, I have it like this:

export function routeData() {
  const resource = createRouteData(async () => await getLatestIslands());
  console.log(resource());
  return resource;
}

export default function Home() {
  console.log("Defining index");
  const islands = useRouteData<typeof routeData>();
  console.log(islands());
  const [_, addIslands] = useIslandsContext();
  addIslands(islands()!);

  return (
    <main>
      <FeaturedIsland />
      <LatestIslands />
    </main>
  );
}

export function routeData() {
  const resource = createRouteData(async () => await getLatestIslands());
  console.log(resource());
  return resource;
}

export default function Home() {
  console.log("Defining index");
  const islands = useRouteData<typeof routeData>();
  console.log(islands());
  const [_, addIslands] = useIslandsContext();
  addIslands(islands()!);

  return (
    <main>
      <FeaturedIsland />
      <LatestIslands />
    </main>
  );
}

According to my logs, data is present in both the routeData() and when the component initially renders. However, it doesn't seem like it is ever put into the context (as in, it's saying it is undefined on my UI). How would I go about this?

1 Reply

Je Suis Un AmiOP•2y ago

Looks like it’s a problem with how I’m using Context.

Gaming

Programming

Saving Results of routeData() into a Context