How to fetch data from custom shopify app

[NagoyaDev]

Hello,

I will try to be as descriptive as I can with my problem.

I have been doing a lot of research into this but not really finding an answer. I am currently developing a custom app for a client to build a "price calculator". Basically, I would like to make a fetch request from the storefront to my custom apps API routes which will then get a price from my db and display it on the storefront. I am struggling to understand how I can get through the authentication part of making requests to the app.

Basically, I am trying to figure out how to make a GET request(via fetch) from my storefront to my custom apps API route and send that info back to my storefront.

import "@babel/polyfill";
import dotenv from "dotenv";
import "isomorphic-fetch";
import createShopifyAuth, { verifyRequest } from "@shopify/koa-shopify-auth";
import graphQLProxy, { ApiVersion } from "@shopify/koa-shopify-graphql-proxy";
import Koa from "koa";
import cors from '@koa/cors';
import next from "next";
import Router from "koa-router";
import session from "koa-session";
import * as handlers from "./handlers/index";
dotenv.config();
const port = parseInt(process.env.PORT, 10) || 8081;
const dev = process.env.NODE_ENV !== "production";



const app = next({
  dev,
});
const handle = app.getRequestHandler();
const { SHOPIFY_API_SECRET, SHOPIFY_API_KEY, SCOPES } = process.env;
app.prepare().then(() => {
  const server = new Koa();
  const router = new Router();
  server.use(
    session(
      {
        sameSite: "none",
        secure: true,
      },
      server
    )
  );
  server.keys = [SHOPIFY_API_SECRET];
  server.use(
    createShopifyAuth({
      apiKey: SHOPIFY_API_KEY,
      secret: SHOPIFY_API_SECRET,
      scopes: [SCOPES],

      async afterAuth(ctx) {
        //Auth token and shop available in session
        //Redirect to shop upon auth
        const { shop, accessToken } = ctx.session;
        
        ctx.cookies.set("shopOrigin", shop, {
          httpOnly: false,
          secure: true,
          sameSite: "none",
        });
        ctx.redirect("/");
      },
    })
  );
  server.use(
    graphQLProxy({
      version: ApiVersion.October19,
    })
  );

  server
  .use(cors({ origin: "*" }))
  .use(router.routes())
  .use(router.allowedMethods());


  router.get("/hello", async (ctx) => {
    ctx.body = "Hello"
  });


  router.get("(.*)", verifyRequest(), async (ctx) => {
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
    ctx.res.statusCode = 200;

  });








  server.listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`);
  });
});

I have written just a simple test route. I found that when I try to make a fetch request when the app running on my localhost I can successfully get a response but when I try to do the same request on my Heroku hosted version I get back OAuth redirect URLs. Can someone explain why that is?

I have been trying to figure out how to get past that authorization using POSTMAN by adding my API key and secret key info into various places like environment variables, headers, through basic auth, or in  OAuth authentication but I am having no luck.

This is the response I get back when I try a get request with basic auth

I get this HTML with a URL that goes to my app.

What is the process of having the request be authenticated so I can get back the information I need?

Additionally, this is my little bit of code for the fetch request I made for the storefront. The 

const url = 'https://shopify-price-calculator-app.herokuapp.com/hello/?shop=oniwa-app-development-store.myshopify.com/';


fetch(url, { mode: 'no-cors' })
  .then((res) => res.text())
  .then((text) => console.log(text));

I would really appreciate any help in figuring this out!

Thank you,

[policenauts · Accepted solution]

Perhaps someday they will make this a sticky given how many people ask, but for your API requests to work in Postman you need to delete all the Shopify cookies (click on 'Cookies' on the right, and then delete all of the ones associated with Shopify)

[NagoyaDev]

Hello,

I appreciate your response. This was already something I looked into and tried but am still experiencing issues with.

When I try to make a GET request to my test route  https://shopify-price-calculator-app.herokuapp.com/hello?shop=oniwa-app-development-store.myshopify.... in Postman I am met with this response.

When I googled this response I found out this was some issue in Safari browser from April? Maybe not related to what I am dealing with but still I am just a little confused as how to work around this part.

As you mentioned, when I clear cookies I can access those routes via locally hosted version of the app no problem but I still can't with my Heroku hosted one.

Thank you again for your response earlier.

[NagoyaDev]

Well don't I feel stupid.

Maybe I had the order of events wrong or the wrong URL in my testing but it's working now.

Thank you for the quick response. I selected your answer as the solution.

For anyone else experiencing this issue. Remember to set your URL to 

https://your-app-url>.com/<your-path>?shop=<your-shop-name>.myshopify.com

and clear cookies out in Postman before sending the request.

[policenauts]

I actually didn't look closely and didn't realize you weren't hitting the Shopify API directly in Postman, so my cookies comment might have been irrelevant. Glad you got it working though!

[mjolliffecasas]

@NagoyaDev Do you think you could share your GitHub of the app or just a summary of how you created this? I'm trying to use my app to make a simple call to an external API and struggling to do so. Thank you!