What's your biggest current challenge? Have your say in Community Polls along the right column.

Cannot read orders and i have read_orders scopes initialized

Solved

Cannot read orders and i have read_orders scopes initialized

jonatanblaine
Shopify Partner
3 0 0

Hello to everyone,

 

I'm building a shopify app with Shopify cli 3.0 

In my shopify.app.toml i have the next

 

scopes = "read_orders, read_products, read_checkouts, read_customers, read_inventory, read_fulfillments, read_assigned_fulfillment_orders, read_content, read_discounts, read_draft_orders, read_files, read_gift_cards, read_merchant_managed_fulfillment_orders, read_third_party_fulfillment_orders, read_order_edits"

 

I'm i calling the api endpoint following the next steps

 

 

 

try {
                const response = await fetch(`/api/orders`, {
                    method: "GET",
                    headers: { "Content-Type": "application/json" },
                });
                if (response.ok) {
                    const newOrders = await response.json();
                    console.log(newOrders)
                }
            } catch (error) {
                console.error(error)
            }

 

 

 

Here the code of my endpoint

 

 

 

app.get("/api/orders", async (req, res) => {
    try {
      const session = await Shopify.Utils.loadCurrentSession(
        req,
        res,
        app.get("use-online-tokens")
      );

      if (!session) {
        res.status(401).send("Could not find a Shopify session");
        return;
      }

      const client = new Shopify.Clients.Graphql(
        session.shop,
        session.accessToken
      );

      const orders = await client.query({
        data: {
          query: `query {
            orders(first: 10) {
              edges {
                node {
                  id
                }
              }
            }
          }`,
        },

      });

      res.send(orders.body.data);
    } catch (error) {
      console.log(error.message)
      res.status(500).send(error.message);
    }
  });

 

 

 

For some reason that i can't find, its returning an error 500 with the following message: GraphQL query returned errors

 

I have the correct scopes added in this case but for some reasons i can't see the orders that i have in my shop

 

I could add more info if it's necessary. 

 

Thanks for the help 

Accepted Solution (1)
john04
Shopify Partner
7 1 0

This is an accepted solution.

Hi @jonatanblaine 

 

Just an update. I managed to query the data from graphql. You will need to request access for protected customer data in your app setup settings. You may refer here https://shopify.dev/apps/store/data-protection/protected-customer-data. Once done, you are able to query using graphql without the GraphQL query returned errors message. Hope this helps

Route: /web/helpers/graphql-fetch.js

 
import { Shopify } from "@shopify/shopify-api";

const ORDER_QUERY = `

{

  orders(first: 5, query: "created_at:>2021-12-01") {

    edges {

      node {

        id

        createdAt

      }

    }

  }

}`

export async function orderFetcher(session) {

  const client = new Shopify.Clients.Graphql(session.shop, session.accessToken);

  return await client.query({ data: ORDER_QUERY });

}

 

Route: web/index.ts
 
app.get("/api/orders", async (req, res) => {

    const session = await Shopify.Utils.loadCurrentSession(

      req,

      res,

      app.get("use-online-tokens"),

    );

    let status = 200;

    let error = null;

    let orders = null

    try {

      orders = await orderFetcher(session);

      res.send(orders?.body)

    } catch (e: any) {

      console.log(`Failed to process orders fetching: ${e.message}`);

      status = 500;

      error = e.message;

      res.status(status).send({ success: status === 200, error });

    }

  }
 
Layout file that has the onlick listener
const handleSyncOrders = async () => {

    const response = await fetch("/api/orders");

    if (response.ok) {
      // newOrders = await response.json();

      // console.log(newOrders)

      setToastProps({ content: "Order fetched!" });

    } else {
      setToastProps({

        content: "There was an error fetching orders",

        error: true,

      });

    }

  };

View solution in original post

Replies 6 (6)

john04
Shopify Partner
7 1 0

Hi, I am also facing this issue, any update on how to resolve this. Thanks

jonatanblaine
Shopify Partner
3 0 0

Hi @john04

 

Unfortunately I couldn't fix the problem with Graphql. I used REST instead of Graphql for that query

I'm still waiting for some solution in Grapql

 

Thanks

john04
Shopify Partner
7 1 0

Hi @jonatanblaine ,

 

I see. Thanks for the reply. Is it possible for me to see a short snippet on the REST implementation. I am fairly new to this. Will really appreciate any help.

 

Thanks

jonatanblaine
Shopify Partner
3 0 0

You can try that.

 

In the frontend:

Route: /web/frontend/components/Layout.jsx 

 

useEffect(() => {
        const initOrders = async () => {
            try {
                const response = await fetch(`/api/orders`, {
                    method: "GET",
                    headers: { "Content-Type": "application/json" },
                });
                if (response.ok) {
                    const newOrders = await response.json();
                }
            } catch (error) {
                console.error(error)
            }
        }
        initOrders()
    }, [])

 

 

I'm using the rest client of shopify: Shopify.Clients.Rest for the backend 

Route: /web/middleware/orders-api.js

 

app.get("/api/orders", async (req, res) => {
    try {
      const session = await Shopify.Utils.loadCurrentSession(
        req,
        res,
        app.get("use-online-tokens")
      );

      if (!session) {
        res.status(401).send("Could not find a Shopify session");
        return;
      }

      const client = new Shopify.Clients.Rest(session.shop, session.accessToken);
      const response = await client.get({
        path: 'orders',
        query: { created_at_min: "2022-09-11T11:00:00-05:00", fields: 
                 "id,name,line_items", status: 'open', limit: '250' }
        });
        res.send(response);
    } catch (error) {
        res.status(500).send(error.message);
    }
  });

 

 

try using the rest client instead of graphql

I hope it helps you

john04
Shopify Partner
7 1 0

Thank you brother, I will try it out.

john04
Shopify Partner
7 1 0

This is an accepted solution.

Hi @jonatanblaine 

 

Just an update. I managed to query the data from graphql. You will need to request access for protected customer data in your app setup settings. You may refer here https://shopify.dev/apps/store/data-protection/protected-customer-data. Once done, you are able to query using graphql without the GraphQL query returned errors message. Hope this helps

Route: /web/helpers/graphql-fetch.js

 
import { Shopify } from "@shopify/shopify-api";

const ORDER_QUERY = `

{

  orders(first: 5, query: "created_at:>2021-12-01") {

    edges {

      node {

        id

        createdAt

      }

    }

  }

}`

export async function orderFetcher(session) {

  const client = new Shopify.Clients.Graphql(session.shop, session.accessToken);

  return await client.query({ data: ORDER_QUERY });

}

 

Route: web/index.ts
 
app.get("/api/orders", async (req, res) => {

    const session = await Shopify.Utils.loadCurrentSession(

      req,

      res,

      app.get("use-online-tokens"),

    );

    let status = 200;

    let error = null;

    let orders = null

    try {

      orders = await orderFetcher(session);

      res.send(orders?.body)

    } catch (e: any) {

      console.log(`Failed to process orders fetching: ${e.message}`);

      status = 500;

      error = e.message;

      res.status(status).send({ success: status === 200, error });

    }

  }
 
Layout file that has the onlick listener
const handleSyncOrders = async () => {

    const response = await fetch("/api/orders");

    if (response.ok) {
      // newOrders = await response.json();

      // console.log(newOrders)

      setToastProps({ content: "Order fetched!" });

    } else {
      setToastProps({

        content: "There was an error fetching orders",

        error: true,

      });

    }

  };