Questions and discussions about using the Shopify CLI and Shopify-built libraries.
Hi
I'm a Remix newbie, trying to modify a copy of the remix template code to achieve what I need. I'm trying to use form values in my Mutation / function code.
However, the console.log feature won't output when the rest of the function runs - which makes debugging and learning what is happening really difficult.
Can someone explain why the console log doesn't work when used within in this function? (it doesn't work on the default template app._index.jsx either)
and ideally, give me a pointer as to how I can use a form (text input field) value in my graphql code.
My action function and mutation works as expected with hardcoded values.
Thanks.
export const action = async ({ request }) => {
const { admin } = await authenticate.admin(request);
const formData = await request.formData();
console.log("Action is called"); // WHY DOESN'T THIS LOG ANYTHING TO THE CONSOLE???
const response = await admin.graphql(
`#graphql
mutation draftOrderUpdate($id: ID!, $input: DraftOrderInput!) {
draftOrderUpdate(id: $id, input: $input) {
draftOrder {
id
customAttributes {
key
value
}
}
userErrors {
field
message
}
}
}`,
{
variables: {
id: `gid://shopify/DraftOrder/905513205805`,
input:{
customAttributes: {
key: "Gift message",
value: "test" // I'M TRYING TO MAKE THIS VALUE DYNAMIC FROM A FORM INPUT ???
}
}
}
}
);
const responseJson = await response.json();
return json({
draftOrder: responseJson.data.draftOrderUpdate.draftOrder
});
}
Hi HelpDigital,
In Remix, functions like action
run on the server-side and not in the browser. This means that console.log
statements inside these functions will log to the server console, not the browser console. If you're running your server locally, you should be able to see the logged output in the terminal where you started your server.
Hope this helps!
Liam | Developer Advocate @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog
Thanks Liam,
They don't show in the command line console either - I can see the Post requests and console.log output from other functions, but just not the ones in loader or action functions. Is there any other way to output values passed in via the form?
Thanks,
Leo
Hi HelpDigital
I have a similar problem, that i cant find anywhere (browser or terminal in vs code) where console.log displays.
My code is the following
const [isDeleting, setIsDeleting] = useState(false);
const deleteQRCode = useCallback(async () => {
reset();
/* The isDeleting state disables the download button and the delete QR code button to show the merchant that an action is in progress */
setIsDeleting(true);
console.log("its starting");
i simply added a console.log statement to deleteQRCode function.
Did you find a solution?
Hii @HelpDigital , I am having same issue, so did you found any solution for it?. If so then please let me know.