GraphQL Request returns 403 in old Node/Next.js Shopify App

Shopify Apps
1

Hi everyone,

I want to make some changes to a custom Shopify app I built ~2 years ago.

The app is built with Node and Next.js, following Shopify’s guide to building apps from that time. I haven’t built any Shopify apps since then, so I was surprised to see how much changed and I haven’t been able to make any progress with this all week since all the old tutorials have been removed.

My objective is to make a GraphQL call to get a list of all unfulfilled orders so I can display them in a dashboard component.

Here is my _app.js file:

import App from 'next/app';
import Head from 'next/head';
import { AppProvider } from '@shopify/polaris';
import { Provider } from '@shopify/app-bridge-react';
import '@shopify/polaris/dist/styles.css';
import translations from '@shopify/polaris/locales/en.json';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';

const client = new ApolloClient({
  fetchOptions: { credentials: 'include' }
})

class MyApp extends App {
  render() {
    const { Component, pageProps, shopOrigin } = this.props

    const config = {
      apiKey: API_KEY,
      shopOrigin,
      host: Buffer.from(HOST_URL).toString("base64"),
      forceRedirect: true
    }

    return (
      
    )
  }
}

MyApp.getInitialProps = async ({ ctx }) => {
  return { shopOrigin: ctx.query.shop }
}

export default MyApp

And here is index.js:

import React, { useState }        from 'react'
import { Card, Page, TextField }  from '@shopify/polaris'
import Dashboard                  from './dashboard'
import { Query }                  from 'react-apollo'
import QUERY_ORDERS               from '../util/QUERY_ORDERS'

const Index = () => {

  return(
    
  )
}

export default Index

Finally, the QUERY_ORDERS.js file:

import gql from 'graphql-tag'

const QUERY_ORDERS = gql`
  {
    orders(first: 100, query:"fulfillment_status:unfulfilled", reverse: true) {
      edges {
        node {
          id
          name
          createdAt
          billingAddress {
	    address1
            address2
            city
            company
            country
            firstName
            lastName
            name
            phone
            provinceCode
            zip
          }
          totalPriceSet {
            shopMoney {
              amount
            }
          }
          customer {
            id
            displayName
          }
          lineItems(first: 1) {
	    edges {
              node {
             	name
                sku
                title
                customAttributes {
                  key
                  value
                }
              }
            }
          }
          tags
        }
      }
    }
  }
`;

export default QUERY_ORDERS

I double-checked permissions and I tried using different versions of AppBridge (originally the app was using 1.26.2) and updated the ApolloClient accordingly. I also rebuilt half the app, but no matter how I changed it the call didn’t return any data and I feel like the solution should be quite simple.

The error I’m receiving is just a plain 403 (Forbidden) with no further information as to where exactly the problem might lie.

Thank you so much for your help!