Shopify.Utils.graphqlProxy timeout

Retired Boards Appdev Graphql Basics And Troubleshooting
1

I’m trying to use the shopify admin graphqlProxy based on the starter app and this tutorial https://shopify.dev/apps/getting-started/add-functionality. However await Shopify.Utils.graphqlProxy(ctx.req, ctx.res); just times out no mater what query I send to it.

In my server file:

router.post(
    "/graphql",
    verifyRequest({ returnHeader: true }),
    async (ctx, next) => {
      console.log("here");
      await Shopify.Utils.graphqlProxy(ctx.req, ctx.res);
      console.log("there");
    }
  );

My fontend component:

import { Page } from "@shopify/polaris";
import { useRouter } from 'next/router'
import {useAppBridge} from '@shopify/app-bridge-react';
import {Redirect} from '@shopify/app-bridge/actions';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';

import ProductDetails from "../components/ProductDetails";

const ProductDetailsPage = () => {

  const router = useRouter();
  const { id } = router.query
  console.log(id);

  const app = useAppBridge();
  const redirect = Redirect.create(app);

  const indexRedirect = () => {
    redirect.dispatch(Redirect.Action.APP, "/");
  }

  return (
    // GraphQL query to retrieve products and their prices
    
  )
}

export default ProductDetailsPage;

const GET_PRODUCTS_BY_ID = gql`
  query getProduct($id:ID!) {
    product(id:"gid://shopify/Product/7198994596031") {
    	title,
      productType,
      variants(first: 10) {
        edges {
          node {
            id,
            title,
            selectedOptions {
            	name,
              value
            }
          }
        }
      }
    }
  }
`;

the Query works as expected but when it gets to the server and uses the Shopify.Utils.graphqlProxy it just spins, no response from Shopify whatsoever.

2

My issue was that I was using koa-body on the server instead of per route. The Shopify.Utils.graphqlProxy relies on the node.js Readable events data and end these get consumed by koa-body.

Fix:

import koaBody from 'koa-body';
...
server.use(koaBody()) //applies to all routes including /graphql

to:

import koaBody from 'koa-body';
...
router.post(
    "/api/vehicles/new",
    verifyRequest({ returnHeader: true }),
    koaBody(), //applies only to the needed post route
    vehicleHandlers.createVehicle
  )

related issue:

https://github.com/Shopify/shopify-node-api/issues/138

koa-body also recommends using route based parsing:

https://github.com/koajs/koa-body#usage-with-koa-router