Can anyone help me how to fetch customer data using headless shopify csutomer api in Nextjs as I have logged user using redirect url method,but cant get how to access it?
Hi @NRaza8974
To fetch customer data using the Shopify Customer API in a headless Shopify setup with Next.js, you need to follow these steps:
1. Set up Shopify Admin API Access
Ensure you have the necessary access tokens and permissions in your Shopify store to access the Customer API. Specifically, enable read_customer and write_customer permissions in your private app or custom app settings.
2. Use Access Tokens
When using the Customer API, you’ll need the X-Shopify-Storefront-Access-Token or a session token depending on your setup. For logged-in customers, ensure you’re handling the token securely.
3. Fetch Customer Data After Login
Assuming you’ve authenticated the user using the redirect method and have the access token, you can use the /customers endpoint of the Shopify Admin API to retrieve customer data.
Here’s a Next.js example:
Code Example
import { useEffect, useState } from ‘react’;
export default function FetchCustomerData() {
const [customerData, setCustomerData] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
const fetchCustomer = async () => {
try {
// Replace with your API endpoint
const response = await fetch(‘/api/customer’, {
method: ‘GET’,
headers: {
‘Content-Type’: ‘application/json’,
‘X-Shopify-Storefront-Access-Token’: ‘your-storefront-access-token’, // Add your token
},
});
if (!response.ok) {
throw new Error(‘Failed to fetch customer data’);
}
const data = await response.json();
setCustomerData(data);
} catch (err) {
setError(err.message);
}
};
fetchCustomer();
}, );
return (
Customer Data
{error && <p style={{ color: ‘red’ }}>{error}
}{customerData ? (
{JSON.stringify(customerData, null, 2)}
) : (
Loading...
)}
);
}
4. Server-Side API Endpoint
If you don’t want to expose sensitive credentials in your frontend, use a server-side function (API route in Next.js) to handle the customer data request securely.
API Route Example
Create a file in /pages/api/customer.js:
export default async function handler(req, res) {
const accessToken = ‘your-admin-access-token’; // Replace with your admin API token
const storeUrl = ‘your-store.myshopify.com’; // Replace with your store URL
try {
const response = await fetch(https://${storeUrl}/admin/api/2023-01/customers.json, {
method: ‘GET’,
headers: {
‘Content-Type’: ‘application/json’,
‘X-Shopify-Access-Token’: accessToken,
},
});
if (!response.ok) {
throw new Error(‘Failed to fetch customer data’);
}
const data = await response.json();
res.status(200).json(data);
} catch (error) {
res.status(500).json({ error: error.message });
}
}
5. Important Notes- Make sure to never expose sensitive tokens directly in your frontend. Use server-side functions or middleware to handle secure requests.
- Validate and refresh session tokens securely to keep customers logged in.
If you need any other assistance, feel free to reply and I will try my best to respond.
Best regards,
Daisy