I have been assigned the task of transferring my employer's Shopify Storefront into a Hydrogen headless build for the past few weeks now.
Part of our store includes a signup form, where users can sign up for email discounts before checkout. They enter their email and password, select enter, then the info is to be sent to the Storefront API.
This had been giving me headaches for a while. Most of the Shopify Hydrogen documentation focuses on making API calls on component render, and not on event-driven scenarios. However, I finally found a solution and hopefully my solution can help.
Solution
In Hydrogen, you can not simply make API calls on the client side, like you can in other frameworks. This is to ensure security, so no one can access private storefront information from the client-side. To safely send data to a server component upon an event (form submission in my case), we will be using the useFetcher hook from Remix.
First, Make 2 Components
Make sure both of these components can be routed to. I am making both of them hybrid components, but you can make them client .client.jsx and server .server.jsx respectfully.
We need ...
import { useState, useEffect } from 'react';
import { useFetcher } from '@remix-run/react';
export async function loader({context}) {
return null;
}
export default function CustomerSignUp() {
const [customerInput, setCustomerInput] = useState({
acceptsMarketing: true,
email: "",
password: "",
});
const handleInputChange = (e) => {
const { name, value } = e.target;
setCustomerInput(input => ({
...input,
[name]: value
}));
};
const handleSignup = async (e) => {
e.preventDefault();
};
return (
<div>
<form>
<div>Subscription Signup</div>
<input
type="email"
name="email"
value={customerInput.email}
onChange={handleInputChange}
placeholder="Email"
required
/>
<input
type="password"
name="password"
value={customerInput.password}
onChange={handleInputChange}
placeholder="Password"
required
/>
<button type="submit" className=''>Sign Up</button>
</form>
</div>
);
}
import { useLoaderData } from '@remix-run/react';
export async function loader({ request }) {
return null.
};
export const action = async ({ request }) => {
const mutation = `
mutation CreateCustomer($input: CustomerCreateInput!) {
customerCreate(input: $input) {
customer {
id
email
firstName
lastName
acceptsMarketing
phone
}
customerUserErrors {
code
field
message
}
}
}
`;
};
export default function SignUp() {
return (
<></>
);
}
Implement useFetcher Hook from Remix
The useFetcher hook will be used in the client component. It allows us to make requests to our server component. In this case, I will be using it for a POST request.
import { useState, useEffect } from 'react';
import { useFetcher } from '@remix-run/react';
export async function loader({context}) {
return null;
}
export default function CustomerSignUp() {
const fetcher = useFetcher();
const [customerInput, setCustomerInput] = useState({
acceptsMarketing: true,
email: "",
password: "",
});
useEffect(() => {
if (fetcher.data) {
console.log(fetcher.data);
}
}, [fetcher.data]);
const handleInputChange = (e) => {
const { name, value } = e.target;
setCustomerInput(input => ({
...input,
[name]: value
}));
};
const handleSignup = async (e) => {
e.preventDefault();
fetcher.submit({
email: customerInput.email,
password: customerInput.password,
}, {
method: "post",
action: "/signup",
});
};
return (
<div>
<form
onSubmit={handleSignup}
>
<div>Subscription Signup</div>
<input
type="email"
name="email"
value={customerInput.email}
onChange={handleInputChange}
placeholder="Email"
required
/>
<input
type="password"
name="password"
value={customerInput.password}
onChange={handleInputChange}
placeholder="Password"
required
/>
<button type="submit" className=''>Sign Up</button>
</form>
</div>
);
}
Now that we are sending data to the server component, we must unpack it and send it to the API. Then, we can handle the API response and return it to the client event component. This is what our server component will look like now.
import { useLoaderData } from '@remix-run/react';
export async function loader({ request }) {
return null;
};
export const action = async ({ request }) => {
const formData = await request.formData();
const email = formData.get("email");
const password = formData.get("password");
const variables = {
input: {
email,
password,
},
};
const mutation = `
mutation CreateCustomer($input: CustomerCreateInput!) {
customerCreate(input: $input) {
customer {
id
email
firstName
lastName
acceptsMarketing
phone
}
customerUserErrors {
code
field
message
}
}
}
`;
try {
const response = await fetch("Storefront API Link", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-Shopify-Storefront-Access-Token": "your-token",
},
body: JSON.stringify({ query: mutation, variables }),
});
if (!response.ok) {
throw new Error(`Error: ${response.status}`);
}
const responseData = await response.json();
if (responseData.data && responseData.data.customerCreate) {
return new Response(JSON.stringify({
message: "Customer created successfully",
customer: responseData.data.customerCreate.customer
}), {
status: 200,
headers: {
"Content-Type": "application/json",
},
});
} else if (responseData.errors) {
return new Response(JSON.stringify({ errors: responseData.errors }), {
status: 400,
headers: {
"Content-Type": "application/json",
},
});
}
} catch (error) {
return new Response(JSON.stringify({ error: error.message }), {
status: 500,
headers: {
"Content-Type": "application/json",
},
});
}
};
export default function SignUp() {
return (
<></>
);
}
Summary
The useFetcher hook can be used to send data back and forth between components dynamically. It can be configured (like I have done) to make API calls conditionally and on events. It is very useful, and saved me a ton of headache.
Thanks for reading!
