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 Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

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

Okay