Why is useActionData returning undefined in my Shopify remix run code?

EvilGranny
Shopify Partner
15 2 2

Hey, I'm studing shopify and remis and I don't understand how is useActionData working.
There's the code:

import {useState} from "react";
import { json } from "@remix-run/node";
import {
Page,
Layout,
EmptyState,
} from "@shopify/polaris";
import ProductList from "../../components/ProductList";
import {useActionData, useSubmit} from "@remix-run/react";

export async function action({ request }) {
return json({
data: request.data,
number: 12,
});
}

export default function Index() {
const [selectedIds, setSelectedIds] = useState([]);
const submit = useSubmit();
const actionData = useActionData();
console.log(actionData?.data)

const doIt = async () => {
const selected = await shopify.resourcePicker({type: 'product', action: 'select', multiple: true});
if (selected?.length) {
setSelectedIds(selected);
submit({data: selected})
}
}

let isEmptyState = !selectedIds.length;

return (
<Page>
<Layout>
<Layout.Section>
{
isEmptyState ? <EmptyState
heading="Manage your inventory transfers"
action={{content: 'Add transfer1123', onAction: doIt}}
image="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"
/>
: <ProductList />
}
<div>{actionData?.toString() || 'no'}</div>
</Layout.Section>
</Layout>
</Page>
);
}

And I have a second question. How I can do gql calls from my custom functions (not action). 
Thanks!

Replies 0 (0)