Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
Hi,
How can I update customer metafields from a headless site? The new customer account api works great for authenticating and changing basic info but I need the user to be able to update a metafield. This isn't possible with the customer account api but there must be a way...
Essentially what I need is:
User authenticates and is then able to click a button which updates a customer metafield associated with their Shopify user account.
Thanks
Solved! Go to the solution
This is an accepted solution.
Hey @sleslss!
Shopify recently made it possible to write metafield values using the Customer Account API. At the moment this mutation is only available in the unstable version, so it may not be best to use this on a production store until it's released in a stable version. See the links below for more details:
Hopefully this helps!
@sleslss The new customer account api doesn't have a mutation that can update the metafield for your customers. To update customer metafields you need to make request to Shopify's Admin API via GraphQL. Depending on where your headless site is hosted, you will need to setup a server api endpoint that accepts the user id and metafield value as payload. Once the payload is received, you can call the admin metafield endpoint with the payload (See link for what your mutation needs to look like). Please ensure that the Admin API secret is not exposed to the users of the site hence why server api endpoint is needed.
However, this doesn't guarantee that the user submitting the request is the same customer, that the fields are being updated for. For example, anyone can go on your site and call the server endpoint and pass in payload of random user ids and metafield value.
To create an authentated request to the endpoint, its probably best to use the Storefront API and call customerAccessTokenCreate mutation for user to log in. The token contains value of who the user is and you can pass the token including the metafield value as the payload to your server endpoint. This way you can ensure that the user making the request is the same customer that the fields need to be update for. So the steps to make this possible would be:
1. Create customer access token when user logs in
2. If successful, capture the customer access token and store it in local storage
3. Send the customer access token to the server endpoint with metafield value
4. Server endpoint verifies the token and gets customer details using customer query.
5. If customer is valid, the logic in the endpoint then calls the Admin API and updates the customer's metafield. (Admin API has its own rate limiting just be careful of how many times the endpoint calls the Admin API)
Alternatively, you can use our Clouver app which sets up the whole infrastructure required to make this use case possible. We saw the same challenges and decided to create an app that makes the update possible without much hassle. It even handles API rate limiting for Admin API. The app once deployed, displays a storefront token and an endpoint that you can make POST requests to with a valid payload.
The implementation of the app is meant for Shopify's theme build however you can still use Headless site to make the calls to the endpoint. You do need an AWS account to set this up and instructions on how to use it with headless are also documented.
Hope this helps and happy to answer any questions you may have.
Thanks
KJ
You can only do it using Admin API.
This is an accepted solution.
Hey @sleslss!
Shopify recently made it possible to write metafield values using the Customer Account API. At the moment this mutation is only available in the unstable version, so it may not be best to use this on a production store until it's released in a stable version. See the links below for more details:
Hopefully this helps!
Great to know 🙂
Good news! Thanks Kyle