How to access the action return data in the component?

[gaojianzhuang]

I have 2 cases:

Case 1: how to access the "action" method return data in the component?

import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
import { json, redirect } from "@remix-run/node";
import { Form, useFetcher, useLoaderData } from "@remix-run/react";
import invariant from "tiny-invariant";

import { getContact, createContact } from "../data";

export const loader = async ({
    params,
}: LoaderFunctionArgs) => {
    return json({ });
};

export const action = async ({
    params,
    request,
}: ActionFunctionArgs) => {
    const formData = await request.formData();
    const creates = Object.fromEntries(formData);
    // call the add API.
   const created = await CreateApi();
    return json(created);
};

export default function AddContact() {
    const fetcher = useFetcher();

   // how to access the "created" object from the action method return?

    const handFormSubmit = (e) => {
        const currentForm = e.target;
        fetcher.submit({
            first: currentForm["first"].value,
            last: currentForm["last"].value,
            twitter: currentForm["twitter"].value,
            avatar: currentForm["avatar"].value,
            notes: currentForm["notes"].value,
        }, {
            method: "post",
        })
    }

    return (
        <Form key={"112"} id="contact-form" onSubmit={handFormSubmit} method="post">
            <p>
                <span>Name</span>
                <input
                    defaultValue={""}
                    aria-label="First name"
                    name="first"
                    type="text"
                    placeholder="First"
                />
                <input
                    aria-label="Last name"
                    defaultValue={""}
                    name="last"
                    placeholder="Last"
                    type="text"
                />
            </p>
            <label>
                <span>Twitter</span>
                <input
                    defaultValue={""}
                    name="twitter"
                    placeholder="@jack"
                    type="text"
                />
            </label>
            <label>
                <span>Avatar URL</span>
                <input
                    aria-label="Avatar URL"
                    defaultValue={""}
                    name="avatar"
                    placeholder="https://example.com/avatar.jpg"
                    type="text"
                />
            </label>
            <label>
                <span>Notes</span>
                <textarea
                    defaultValue={""}
                    name="notes"
                    rows={6}
                />
            </label>
            <p>
                <button type="submit">Save</button>
                <button type="button">Cancel</button>
            </p>
        </Form>
    );
}

I need to get the "created" json data which return from the "action" method and do some customize logic. For example, check the data condition to "navigate" to the other routes.

Case 2: How pass the customize data when use the "redirect" method in the "action" method ?

import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
import { json, redirect } from "@remix-run/node";
import { Form, useFetcher, useLoaderData } from "@remix-run/react";
import invariant from "tiny-invariant";

import { getContact, createContact } from "../data";

export const loader = async ({
    params,
}: LoaderFunctionArgs) => {
    return json({ });
};

export const action = async ({
    params,
    request,
}: ActionFunctionArgs) => {
    const formData = await request.formData();
    const creates = Object.fromEntries(formData);
    // call the add API.
   const created = await CreateApi();
   if (created.id > 0) {
      const customizeData = {};
      // in the "contacts" route, we can access the customize data only one time.
      redirect("contacts", customizeData);
   }
    return json(created);
};

export default function AddContact() {
    const fetcher = useFetcher();

   // how to access the "created" object from the action method return?

    const handFormSubmit = (e) => {
        const currentForm = e.target;
        fetcher.submit({
            first: currentForm["first"].value,
            last: currentForm["last"].value,
            twitter: currentForm["twitter"].value,
            avatar: currentForm["avatar"].value,
            notes: currentForm["notes"].value,
        }, {
            method: "post",
        })
    }

    return (
        <Form key={"112"} id="contact-form" onSubmit={handFormSubmit} method="post">
            <p>
                <span>Name</span>
                <input
                    defaultValue={""}
                    aria-label="First name"
                    name="first"
                    type="text"
                    placeholder="First"
                />
                <input
                    aria-label="Last name"
                    defaultValue={""}
                    name="last"
                    placeholder="Last"
                    type="text"
                />
            </p>
            <label>
                <span>Twitter</span>
                <input
                    defaultValue={""}
                    name="twitter"
                    placeholder="@jack"
                    type="text"
                />
            </label>
            <label>
                <span>Avatar URL</span>
                <input
                    aria-label="Avatar URL"
                    defaultValue={""}
                    name="avatar"
                    placeholder="https://example.com/avatar.jpg"
                    type="text"
                />
            </label>
            <label>
                <span>Notes</span>
                <textarea
                    defaultValue={""}
                    name="notes"
                    rows={6}
                />
            </label>
            <p>
                <button type="submit">Save</button>
                <button type="button">Cancel</button>
            </p>
        </Form>
    );
}

Remix version: 2.8.1

If anyone can give some suggestion, very appreciate. Thank you so much. :)
A

[lili21]

fetcher.data.

[gaojianzhuang]

Thanks, for the Case1, it works fine.