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

daniel211
Shopify Partner
2 0 0

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 (
      <React.Fragment>
        <Head>
          <title>App</title>
          <meta charSet="utf-8" />
        </Head>
        <Provider config={config}>
          <AppProvider i18n={translations}>
            <ApolloProvider client={client}>
              <Component {...pageProps} />
            </ApolloProvider>
          </AppProvider>
        </Provider>
      </React.Fragment>
    )
  }
}

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(
    <Page>
      <Query query={ QUERY_ORDERS }>
        {({ data, loading, error }) => {

          console.log("data: ", data) // undefined
          console.log("loading: ", loading) // true
          console.log("error: ", error) // undefined

          if (loading)  return <Card sectioned>Loading…</Card>;
          if (error)    return <Card sectioned>{error.message}</Card>;

          return (
            <h2>Test</h2>
          )
        }}
      </Query>
    </Page>
  )
}

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!

 

Replies 0 (0)