400 Bad Request with App Bridge, Apollo, GraphQL Admin API

Retired Boards Appdev Graphql Basics And Troubleshooting
11

Another update.. I have given up on using Apollo to query graphql from my React component.

I think the query is not actually being sent to the backend to be processed there, and I was misunderstanding the /graphql endpoint I see in the node server index.js file and that’s not related.

So at this point, my assumption is that I’ve been trying to query the GraphQL Admin API directly from the frontend, unlike how I thought. So that’s why I kept receiving 400 bad request errors saying that it cannot query field “orders” on type “Query”…

My solution was to abandon using Apollo/App-Bridge for this, and just reuse what I found in the Shopify CLI node starter app’s verify-request.js. Example below:

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

const TEST_GRAPHQL_QUERY = `
{
  shop {
    name
  }
}`;

const client = new Shopify.Clients.Graphql(
          session.shop,
          session.accessToken
        );
const response = await client.query({ data: TEST_GRAPHQL_QUERY });
if (response) {
 //do the stuff you want to do with the response data
}

Just for very basic testing with no flexibility, since I’m trying to get the last 10 orders, I added this endpoint to my node server index.js:

app.get("/orders-list", verifyRequest(app), async (req, res) => {
    const session = await Shopify.Utils.loadCurrentSession(req, res, true);
    console.log('===================================================');
    console.log('trying to run /graphql/admin-api stuff in index.js');
    try {
      const client = new Shopify.Clients.Graphql(
        session.shop,
        session.accessToken
      );
     
      const ORDERS_QUERY = `
      {
        orders(first:2) {
          edges {
            node {
              id
            }
          }
        }
      }`;

      const response = await client.query({ data: ORDERS_QUERY });  
        if (response) {
          console.log('checkOrders================== : ', response);
        }      
      res.status(200).send(response.body);
    } catch (error) {
      res.status(500).send(error.message);
    }

Then in my React component, OrdersList.jsx, I fetch that endpoint and receive the data back to do what I want with…

const app = useAppBridge();
  const fetch = userLoggedInFetch(app);
  async function getOrdersList() {
    const orderData = await fetch("/orders-list").then((res) => res.json());
    if (orderData) {
      setOrdersList(orderData);
      console.log("orders list: ", orderData);
    }
    return orderData;
  }

  useEffect(() => {
    getOrdersList();
  }, []);
1 Like