Full Stack Components not working as expected in remix@latest

[jeremypress]

Hi! First time remix user.

I really like Kent's pattern described here. However I've been unable to get the full stack component to trigger its loader.

I see this discussion from a while back talking about how vite may be implicated, but i'm seeing no errors and that import restriction seems to be resolved.

Here's a repo that reproduces the issue locally for me. What am I holding wrong?
https://github.com/jeremypress/remix-fsc. Since it's just 2 files, I'll include them here

import type { MetaFunction } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { User } from "./user";

export const meta: MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

import { json, LoaderFunction } from "@remix-run/node";

export const loader: LoaderFunction = async () => {
  console.log("firing from the root loader");
  return json({ message: "This is some JSON data from the index route" });
};

export default function Index() {
  const data = useLoaderData<typeof loader>();

  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
      <h1>Index Data</h1>
      <p>{data.message}</p>
      <User />
    </div>
  );
}

import { json, LoaderFunction } from "@remix-run/node";

export const loader: LoaderFunction = async () => {
  console.log("firing from the user loader");

  return json({ userMessage: "This is some JSON data from the user" });
};

import { useFetcher } from "@remix-run/react";

export function User() {
  const fetcher = useFetcher<typeof loader>();

  return (
    <div>
      <h1>User Data</h1>
      <p>{fetcher.data ? fetcher.data.userMessage : "Loading..."}</p>
    </div>
  );
}

Thanks!

EDIT: Tried again with a fetcher

[sergiodxa]

The problem is that your component in the resource route (User) is using useLoaderData, this will return the loader data of the route rendering the component, Kent's FullStack Component pattern instead uses useFetcher to fetch the resource route loader.

Note that this also means that your component will not have initial data (unless you also fetch the data in the UI route loader).

[jeremypress]

thanks for the tip! I thought I could also repro with a fetcher, let me verify and update the repo

[jeremypress]

I'm getting the same result with a fetcher, here's what I followed from Kent's guide, he seems to just use useFetcher and not call any methods on it pertaining to the fetch (he does submission and state checking but that shouldn't be required to load data)

https://github.com/kentcdodds/full-stack-components/blob/main/apps/02-after/app/routes/resources/customers.tsx#L24 this was my reference

[jeremypress]

The only other thing I can think of is that Kent doesn't call the root loader client side where he also renders the CustomerCombobox https://github.com/kentcdodds/full-stack-components/blob/24493d0da4f81206434487bb41a0c940db38dc55/apps/02-after/app/routes/__app/sales/invoices/new.tsx#L120

[sergiodxa]

He calls the submit method of the fetcher here https://github.com/kentcdodds/full-stack-components/blob/24493d0da4f81206434487bb41a0c940db38dc55/apps/02-after/app/routes/resources/customers.tsx#L40.

I think you're expecting to have data initially, that's not the point of Kent's full stack components, the idea is to use it to build components like a dropdown where you also have associated loader or action that you will need to call after the user interacts with the component.

[jeremypress]

I see your point. I think I was thrown off by his "twitter like button" example that shows the current like count and allows the user to increment. If the intention is to share code, why would we not be able to share the read aspect of that interaction?

I'll mark this as answered, since this is not the intended use case of this pattern. It feels like the remix approach is to split across routes, but I want this additional data access to happen on the same page.

Thanks for your help!

[sergiodxa]

why would we not be able to share the read aspect of that interaction?

You can, but you will need to call fetcher.load on an useEffect and don't have the likes count on SSR.

[kiliman]

@jeremypress I would assume the "twitter like button" would take a prop with the initial like count. The "full stack" component is primarily for handling the mutation.

Your route would render a <Tweet tweet={tweet}> component where the route would provide the tweet prop (which contains like count, etc). from your loader. By keeping the mutation separate, you don't have to worry about setting up an action on every route that contains the <Tweet> component.