How can I query a theme list using Graphql in a Remix app?

Solved

How can I query a theme list using Graphql in a Remix app?

vivganes
Shopify Partner
2 0 0

The suggested onboarding UX for App Blocks suggest showing a select list of all installed themes.

 

However I do not find any Graphql API for querying themes.

 

Any pointers on how to query that from my App's app._index.tsx ?

 

Context: I am developing a Remix app.

Accepted Solution (1)
Guian
Shopify Partner
6 1 1

This is an accepted solution.

thank you.

 

for future reference and other poeple,  I've listed installed themes via the REST api instead inside the loader function :

 

export const loader = async ({ request }) => {
  const { admin, session } = await authenticate.admin(request);
  
  const shopData = await admin.rest.resources.Shop.all({ session: session });
  const d= shopData?.data[0].domain;

  const themeData = await admin.rest.resources.Theme.all({ session: session });
  const themes = themeData?.data;

  return json({ domain :d, themes});
};


export default function Index() {
  const shopInfos = useLoaderData();
  const shopDomain = shopInfos.domain;
  const themesArray = shopInfos.themes;
...

View solution in original post

Replies 3 (3)

Guian
Shopify Partner
6 1 1

Did you find any information on the  "select theme" part ? 

 

I've got a similar issue:

rejected for "no-functionnal UI" 

 

I can show a Select input, but how to fill it with theme list options ?

vivganes
Shopify Partner
2 0 0

Hi, Since I wasn't able to find a GraphQL API to get list of themes, I used the following URL in my link instead:

 

https://${appDomain}/admin/themes/current/editor?context=apps&template=product&addAppBlockId=${exten...

 

This neatly directs you to theme editor for the current theme

Guian
Shopify Partner
6 1 1

This is an accepted solution.

thank you.

 

for future reference and other poeple,  I've listed installed themes via the REST api instead inside the loader function :

 

export const loader = async ({ request }) => {
  const { admin, session } = await authenticate.admin(request);
  
  const shopData = await admin.rest.resources.Shop.all({ session: session });
  const d= shopData?.data[0].domain;

  const themeData = await admin.rest.resources.Theme.all({ session: session });
  const themes = themeData?.data;

  return json({ domain :d, themes});
};


export default function Index() {
  const shopInfos = useLoaderData();
  const shopDomain = shopInfos.domain;
  const themesArray = shopInfos.themes;
...