returning json with multiple object arrays in remix loader function

Question

This is a remix project using Printful and Cloudinary API. I am having trouble figuring out how to get both objects to return correctly. In the loader function, I am returning a JSON for product info and a list of categories to place the product into.

If return the product.result like this, return json(product.result); then the product renders as intended. If I include categories like this, return json([product.result, categories]); then product returns undefined. Here is my loader function.

export const loader: LoaderFunction = async ({ request }) => {
  try {
    const url = new URL(request.url);
    const id = url.searchParams.get("id");
    console.log("Product ID:", id);
    const categories = await getCategories();
    if (id === null) {
      return json(
        { error: "Missing id parameter", categories },
        { status: 400 }
      );
    } else {
      const product = await getPrintfulProduct({ id });
      console.log("Fetched Product Data:", product);
      if (product.error) {
        if (product.error.reason === "NotFound") {
          return json(
            { error: "Product not found", categories },
            { status: 404 }
          );
        }
        return json({ error: product.error, categories }, { status: 500 });
      }
      return json([product.result, categories]);
    }
  } catch (error) {
    console.error("Loader Error:", error);
    return json({ error: "Internal Server Error" }, { status: 500 });
  }
};

I can share the whole code if you think it's not the loader function or if it helps.

Kiliman · Accepted Answer · 2024-08-07 18:54:51Z

0

I recommend doing something like this:

return json({ product: product.result, categories })

This will return an object like:

{
  "product": { ... },
  "categories": [ ... ],
}

Then in your component, you can do:

const { product, categories } = useLoaderData<typeof loader>()

answered Aug 7, 2024 at 18:54

Kiliman

20.4k3 gold badges46 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

felixmp Over a year ago

json is deprecated. remix.run/docs/en/main/start/…

Collectives™ on Stack Overflow

returning json with multiple object arrays in remix loader function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related