Remix app sidebar not loading & Admin API not working after upgrading to @shopify/shopify-app-remix@^4.1.0

Technical Q&A
1

Hey everyone,

I’m running into a weird issue with my Shopify Remix app and hoping someone has seen this before.

I recently upgraded to: @shopify/shopify-app-remix: ^4.1.0

This app was originally created last year using the Remix template.

What’s happening

  • The left-side app menu doesn’t load

  • Admin API calls stop working

  • The app UI loads partially, but feels “stuck”

Setup

  • Remix embedded app

  • Prisma + MongoDB for session storage

Weird part

If I delete the session record for the store from MongoDB:

  • The app forces re-auth

  • After that, everything works perfectly again

What’s confusing is that the access token looks the same before and after re-auth, so it doesn’t seem like a permissions issue.

Stale or incompatible session data ?
**
Question**

  • Is there a known breaking change for older Remix apps?

  • Do older apps need some kind of migration when upgrading?

  • Anyone else using Prisma + MongoDB seeing this?

3

Hi @ErSanjay

Yes, this is a known issue when upgrading to newer versions of the Shopify Remix library. The problem is that your stored sessions in MongoDB are technically valid (not expired), but they contain data for an older API version or scope configuration. The new v4 library tries to use this stale session data, but the API rejects the request due to the version mismatch, leaving your app in a zombie state where it loads but cannot fetch data.

You are going to need to implement a self-healing check in your main loader. Wrap your initial API call in a try/catch block. If the request fails, catch the error and immediately throw a redirect to your auth login route. This forces the app to re-run the OAuth handshake, which will automatically overwrite the stale MongoDB record with a fresh, compatible session token.

Hope this helps!

1 Like
4

Hi @PieLab Thanks for the solution I have added this way but still gettign same issue.

here my app/routes/app.jsx and also tested with _index.jsx

`export async function loader({ request }) {
try {
const { admin, session } = await authenticate.admin(request);

**const** response = **await** admin.graphql(\`
  query getShop {
    shop {
      name
      myshopifyDomain
    }
  }
\`);

**const** data = **await** response.json();

**if** (!data.data?.shop) {
  **throw** **new** Error('GraphQL query failed - invalid session data');
}

**return** json({
  shopName: data.data.shop.name,
  shopDomain: data.data.shop.myshopifyDomain,
  sessionId: session?.id || 'No session ID',
  status: 'GraphQL session valid - API working!',
  apiVersion: admin.graphql.apiVersion || 'unknown'
});

} catch (error) {
console.error(‘GraphQL session test failed:’, error);
throw redirect(‘/auth’, 302);
}
}`

When adding this check in _index.jsx, it caused an infinite authentication redirection. Could you please suggest what redirection you recommend?