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!
