DEV Community

Prashant Ardeshana
Prashant Ardeshana

Posted on

#3 How to fetch the store details and print to the fronted using react Next.

Set Up Local Environment Variables

  1. Create a .env.local file in the root of your Next.js project to store your Shopify API credentials:

    SHOPIFY_STORE_DOMAIN=your-shopify-store.myshopify.com
    SHOPIFY_STOREFRONT_ACCESS_TOKEN=your-storefront-access-token
    
  2. Replace your-shopify-store.myshopify.com with your Shopify store URL, and your-storefront-access-token with the Storefront API token.


Create lib Folder for the Fetching.

  1. Create a lib folder in the root directory of your project.
  2. Inside the lib folder, create a new file called store.js.
  3. Add the following code to store.js:

    // lib/shopify.js
    export async function getStoreDetails() {
      const query = `
        {
          shop {
            name
            primaryDomain {
              url
            }
            paymentSettings {
              currencyCode
            }
          }
        }
      `;
    
      try {
        const response = await fetch(`https://${process.env.SHOPIFY_STORE_DOMAIN}/api/2024-04/graphql`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "X-Shopify-Storefront-Access-Token": process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN,
          },
          body: JSON.stringify({ query }),
        });
    
        const json = await response.json();
    
        if (json.errors) {
          console.error("GraphQL errors:", json.errors);
          return null; // Return null if there's an error
        }
    
        return json.data.shop; // Return shop data
      } catch (error) {
        console.error("Error fetching store details:", error);
        return null; // Handle fetch errors
      }
    }
    

Displaying Store Details

  1. Go to the app/pages.js file.
  2. Add the following code to fetch and display the store details:

    // app/page.js
    import { getStoreDetails } from '../lib/store';
    
    export default async function StoreDetailsPage() {
      // Fetch store details
      const storeDetails = await getStoreDetails();
    
      // If data fetching failed, handle it here
      if (!storeDetails) {
        return <div>Error fetching store details.</div>;
      }
    
      return (
        <>
          <main className="container mx-auto p-4">
            <p className='text-xl mb-4'>This is the home page.</p>
            <div>
              <h1 className='text-3xl font-bold'>Store Details</h1>
              <p><strong>Name:</strong> {storeDetails.name}</p>
              <p><strong>URL:</strong> <a href={storeDetails.primaryDomain.url}>{storeDetails.primaryDomain.url}</a></p>
              <p><strong>Currency:</strong> {storeDetails.paymentSettings.currencyCode}</p>
            </div>
          </main>
        </>
      );
    }
    

That’s it! Your store details will now be displayed on the main page.

Output like this:


This is the home page.

Store Details

Name: my-store

URL: https://my-store.myshopify.com/

Currency: INR

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay