Completed "Getting Started", home & onboarding page render nothing

[mikedownesdev]

Hi there, I completed all of the steps under Getting Started and neither the / route or the /onboarding routes render the expected content. The /settings route does render successfully.

Feeling good that the app was indeed mounting (since the Settings page rendered) and I could see network activity in Terminal, I decided to inspect the / route and I got the following error: Uncaught TypeError: Cannot read properties of undefined (reading 'adminShop')

https://{my-dev-store}.myshopify.com/admin/apps/{my-first-app}

This same behavior and error can be seen when hitting the /onboarding route.

Investigating the error message, we can see that adminShop comes from the result of useQuery. Here are the relevant lines from app/src/sections/Home/Home.jsx:

import React from 'react';
import {gql, useQuery} from '@apollo/client';
import {Introduction, Overview} from './components';
import {Card, SkeletonBodyText, SkeletonPage} from '@shopify/polaris';

const HOME_PAGE_QUERY = gql`
  query HomePageQuery {
    adminShop {
      id
      domain
      appHandle
      publicationId
      availableProductCount
      onboardingInfoCompleted
      onboardingCompleted
    }
  }
`;

const Home = () => {
  const {data, loading} = useQuery(HOME_PAGE_QUERY);
  if (loading) {
    return (
      <SkeletonPage>
        <Card sectioned>
          <SkeletonBodyText />
        </Card>
      </SkeletonPage>
    );
  }

  const {
    adminShop: {
      domain,
      appHandle,
      publicationId,
      availableProductCount,
      onboardingInfoCompleted,
      onboardingCompleted,
    },
  } = data;

  //...

}

So clearly there's a disconnect here; my GraphQL query isn't returning anything useful. I'm very junior when it comes to GraphQL and Sqlite so I'm thinking there's something amiss with what I'm doing. I don't know how to test that GraphQL query or even verify that the database it's reading exists. I thought it might be worth noting that I did not modify the config/config.js file during the Getting Started steps, so that file looks like so:

config/config.js

{
  "development": {
    "dialect": "sqlite",
    "storage": "database.sqlite"
  },
  "test": {
    "use_env_variable": true,
    "dialect": "sqlite",
    "storage": ":memory:" 
  },
  "production": {
    "dialect": "sqlite",
    "storage": "database.sqlite"
  }
}

I'm unsure about the next step in debugging. I am new to developing for Shopify, and I'm still junior when it comes to a lot of concepts, so I'd really appreciate the education.

[mikedownesdev]

Did some more digging, and using the Apollo GraphQL Sandbox Explorer, I copied a query from the codebase to test my issue. I used the query stored in ONBOARDING_PAGE_QUERY from app/src/sections/Onboarding/Onboarding.jsx. That query is:

query OnboardingPageQuery {
    adminShop {
      id
      onboardingInfoCompleted
      termsAccepted
      onboardingCompleted
    }
  }

Which gave me the following error:

{
    "errors": [
      {
        "message": "Invalid bearer token",
        "locations": [
          {
            "line": 2,
            "column": 5
          }
        ],
        "path": [
          "adminShop"
        ],
        "extensions": {
          "code": "UNAUTHENTICATED",
          "exception": {
            "stacktrace": [
              "AuthenticationError: Invalid bearer token",
              "    at _callee$ (/Users/michael/Development/shopify/shopify-marketplaces-admin-app/server/graphql/resolvers.js:14:15)",
              "    at tryCatch (/Users/michael/Development/shopify/shopify-marketplaces-admin-app/server/graphql/resolvers.js:2:1)",
              "    at Generator._invoke (/Users/michael/Development/shopify/shopify-marketplaces-admin-app/server/graphql/resolvers.js:2:1)",
              "    at Generator.next (/Users/michael/Development/shopify/shopify-marketplaces-admin-app/server/graphql/resolvers.js:2:1)",
              "    at asyncGeneratorStep (/Users/michael/Development/shopify/shopify-marketplaces-admin-app/server/graphql/resolvers.js:2:1)",
              "    at _next (/Users/michael/Development/shopify/shopify-marketplaces-admin-app/server/graphql/resolvers.js:2:1)",
              "    at /Users/michael/Development/shopify/shopify-marketplaces-admin-app/server/graphql/resolvers.js:2:1",
              "    at new Promise (<anonymous>)",
              "    at Object.<anonymous> (/Users/michael/Development/shopify/shopify-marketplaces-admin-app/server/graphql/resolvers.js:2:1)",
              "    at Object.adminShop (/Users/michael/Development/shopify/shopify-marketplaces-admin-app/server/graphql/resolvers.js:21:6)",
              "    at field.resolve (/Users/michael/Development/shopify/shopify-marketplaces-admin-app/node_modules/apollo-server-express/node_modules/apollo-server-core/src/utils/schemaInstrumentation.ts:106:18)",
              "    at executeField (/Users/michael/Development/shopify/shopify-marketplaces-admin-app/node_modules/graphql/execution/execute.js:481:20)",
              "    at executeFields (/Users/michael/Development/shopify/shopify-marketplaces-admin-app/node_modules/graphql/execution/execute.js:413:20)",
              "    at executeOperation (/Users/michael/Development/shopify/shopify-marketplaces-admin-app/node_modules/graphql/execution/execute.js:344:14)",
              "    at execute (/Users/michael/Development/shopify/shopify-marketplaces-admin-app/node_modules/graphql/execution/execute.js:136:20)",
              "    at execute (/Users/michael/Development/shopify/shopify-marketplaces-admin-app/node_modules/apollo-server-express/node_modules/apollo-server-core/src/requestPipeline.ts:501:34)",
              "    at processGraphQLRequest (/Users/michael/Development/shopify/shopify-marketplaces-admin-app/node_modules/apollo-server-express/node_modules/apollo-server-core/src/requestPipeline.ts:407:28)",
              "    at processTicksAndRejections (node:internal/process/task_queues:96:5)",
              "    at processHTTPRequest (/Users/michael/Development/shopify/shopify-marketplaces-admin-app/node_modules/apollo-server-express/node_modules/apollo-server-core/src/runHttpQuery.ts:434:24)"
            ]
          }
        }
      }
    ],
    "data": null
}

It would be really nice if someone from Shopify Devs could weigh in here

[Meijhuis]

I am having the exact same issue, did you manage to find a solution?

[atmichaelcheng]

The issue is you haven't "turn app into a sales channel", see this issue https://github.com/Shopify/shopify-marketplaces-admin-app/issues/8#issuecomment-1204287243