Fix GraphiQL tab order and remove DEFAULT_SHOP_QUERY duplication

Problem 1: Tab order was incorrect
- WELCOME_MESSAGE now appears first (in focus) as intended
- DEFAULT_SHOP_QUERY appears second
- Custom queries from config appear after defaults

Problem 2: Code duplication
- Removed DEFAULT_SHOP_QUERY constant from server.ts (lines 19-31)
- Changed server to pass query ?? undefined instead of query ?? DEFAULT_SHOP_QUERY
- Frontend now handles all default tabs consistently

Changes:
- packages/graphiql-console/src/components/GraphiQLEditor/GraphiQLEditor.tsx
  - Reordered tab construction logic to place WELCOME_MESSAGE first
  - Simplified logic: always include DEFAULT_SHOP_QUERY (no deduplication)

- packages/app/src/cli/services/dev/graphiql/server.ts
  - Removed duplicated DEFAULT_SHOP_QUERY constant
  - Server only sends custom queries when explicitly provided

- packages/graphiql-console/src/components/GraphiQLEditor/GraphiQLEditor.test.tsx
  - Updated 6 tests to match new tab order

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: amcaplan

packages/app/src/cli/services/dev/graphiql/server.ts

@@ -16,20 +16,6 @@ import {createRequire} from 'module'
 
 const require = createRequire(import.meta.url)
 
-// Default query for GraphiQL - matches DEFAULT_SHOP_QUERY in graphiql-console package
-const DEFAULT_SHOP_QUERY = `query shopInfo {
-  shop {
-    name
-    url
-    myshopifyDomain
-    plan {
-      displayName
-      partnerDevelopment
-      shopifyPlus
-    }
-  }
-}`
-
 class TokenRefreshError extends AbortError {
   constructor() {
     super('Failed to refresh credentials. Check that your app is installed, and try again.')
@@ -194,7 +180,7 @@ export function setupGraphiQLServer({
       storeFqdn,
       baseUrl,
       key: key ?? undefined,
-      query: query ?? DEFAULT_SHOP_QUERY,
+      query: query ?? undefined,
     }
 
     // Inject config script before </head>

packages/graphiql-console/src/components/GraphiQLEditor/GraphiQLEditor.test.tsx

@@ -121,13 +121,13 @@ describe('<GraphiQLEditor />', () => {
     const graphiqlCall = mockGraphiQL.mock.calls[0][0]
     const defaultTabs = graphiqlCall.defaultTabs
 
-    // Should have DEFAULT_SHOP_QUERY + WELCOME_MESSAGE
+    // Should have WELCOME_MESSAGE + DEFAULT_SHOP_QUERY
     expect(defaultTabs).toHaveLength(2)
-    expect(defaultTabs[0].query).toContain('query shopInfo')
-    expect(defaultTabs[1].query).toContain('Welcome to GraphiQL')
+    expect(defaultTabs[0].query).toContain('Welcome to GraphiQL')
+    expect(defaultTabs[1].query).toContain('query shopInfo')
   })
 
-  test('includes initial query from config as first tab', () => {
+  test('includes initial query from config as third tab', () => {
     const configWithQuery = {
       ...baseConfig,
       query: 'query test { shop { name } }',
@@ -138,12 +138,12 @@ describe('<GraphiQLEditor />', () => {
     const graphiqlCall = mockGraphiQL.mock.calls[0][0]
     const defaultTabs = graphiqlCall.defaultTabs
 
-    // First tab should be the config query
-    expect(defaultTabs[0].query).toBe('query test { shop { name } }')
-    expect(defaultTabs[0].variables).toBe('{"var": "value"}')
+    // First tab is WELCOME_MESSAGE, second is DEFAULT_SHOP_QUERY, third is config query
+    expect(defaultTabs[2].query).toBe('query test { shop { name } }')
+    expect(defaultTabs[2].variables).toBe('{"var": "value"}')
   })
 
-  test('skips DEFAULT_SHOP_QUERY if already in config.query', () => {
+  test('always includes DEFAULT_SHOP_QUERY even if config has similar query', () => {
     const configWithShopQuery = {
       ...baseConfig,
       query: 'query shopInfo { shop { id name } }',
@@ -153,10 +153,11 @@ describe('<GraphiQLEditor />', () => {
     const graphiqlCall = mockGraphiQL.mock.calls[0][0]
     const defaultTabs = graphiqlCall.defaultTabs
 
-    // Should have: config query + WELCOME_MESSAGE (no duplicate shop query)
-    expect(defaultTabs).toHaveLength(2)
-    expect(defaultTabs[0].query).toContain('query shopInfo')
-    expect(defaultTabs[1].query).toContain('Welcome to GraphiQL')
+    // Should have: WELCOME_MESSAGE + DEFAULT_SHOP_QUERY + config query (no deduplication)
+    expect(defaultTabs).toHaveLength(3)
+    expect(defaultTabs[0].query).toContain('Welcome to GraphiQL')
+    expect(defaultTabs[1].query).toContain('query shopInfo')
+    expect(defaultTabs[2].query).toContain('query shopInfo')
   })
 
   test('includes defaultQueries from config', () => {
@@ -172,11 +173,11 @@ describe('<GraphiQLEditor />', () => {
     const graphiqlCall = mockGraphiQL.mock.calls[0][0]
     const defaultTabs = graphiqlCall.defaultTabs
 
-    // Should have: DEFAULT_SHOP_QUERY + 2 defaultQueries + WELCOME_MESSAGE
+    // Should have: WELCOME_MESSAGE + DEFAULT_SHOP_QUERY + 2 defaultQueries
     expect(defaultTabs).toHaveLength(4)
-    expect(defaultTabs[1].query).toContain('query products')
-    expect(defaultTabs[2].query).toContain('query orders')
-    expect(defaultTabs[2].variables).toBe('{"first": 10}')
+    expect(defaultTabs[2].query).toContain('query products')
+    expect(defaultTabs[3].query).toContain('query orders')
+    expect(defaultTabs[3].variables).toBe('{"first": 10}')
   })
 
   test('adds preface to defaultQueries when provided', () => {
@@ -194,10 +195,10 @@ describe('<GraphiQLEditor />', () => {
     const graphiqlCall = mockGraphiQL.mock.calls[0][0]
     const defaultTabs = graphiqlCall.defaultTabs
 
-    expect(defaultTabs[1].query).toBe('# This is a test query\nquery test { shop { name } }')
+    expect(defaultTabs[2].query).toBe('# This is a test query\nquery test { shop { name } }')
   })
 
-  test('WELCOME_MESSAGE is always the last tab', () => {
+  test('WELCOME_MESSAGE is always the first tab', () => {
     const configWithMultipleQueries = {
       ...baseConfig,
       query: 'query initial { shop { id } }',
@@ -211,9 +212,8 @@ describe('<GraphiQLEditor />', () => {
     const graphiqlCall = mockGraphiQL.mock.calls[0][0]
     const defaultTabs = graphiqlCall.defaultTabs
 
-    // Last tab should always be WELCOME_MESSAGE
-    const lastTab = defaultTabs[defaultTabs.length - 1]
-    expect(lastTab.query).toContain('Welcome to GraphiQL')
+    // First tab should always be WELCOME_MESSAGE
+    expect(defaultTabs[0].query).toContain('Welcome to GraphiQL')
   })
 
   test('passes correct props to GraphiQL', () => {

packages/graphiql-console/src/components/GraphiQLEditor/GraphiQLEditor.tsx

@@ -58,25 +58,26 @@ export function GraphiQLEditor({config, apiVersion}: GraphiQLEditorProps) {
   const defaultTabs = useMemo(() => {
     const tabs = []
 
-    // 1. Add initial query from config FIRST (if provided)
+    // 1. Add WELCOME_MESSAGE tab FIRST (in focus)
+    tabs.push({
+      query: WELCOME_MESSAGE,
+    })
+
+    // 2. Add DEFAULT_SHOP_QUERY tab SECOND (always)
+    tabs.push({
+      query: DEFAULT_SHOP_QUERY,
+      variables: '{}',
+    })
+
+    // 3. Add initial query from config (if provided)
     if (config.query) {
       tabs.push({
         query: config.query,
         variables: config.variables ?? '{}',
       })
     }
 
-    // 2. Add DEFAULT_SHOP_QUERY SECOND (if not already in config)
-    const hasShopQuery =
-      config.query?.includes('query shopInfo') ?? config.defaultQueries?.some((q) => q.query.includes('query shopInfo'))
-    if (!hasShopQuery) {
-      tabs.push({
-        query: DEFAULT_SHOP_QUERY,
-        variables: '{}',
-      })
-    }
-
-    // 3. Add default queries from config
+    // 4. Add default queries from config
     if (config.defaultQueries) {
       config.defaultQueries.forEach(({query, variables, preface}) => {
         tabs.push({
@@ -86,11 +87,6 @@ export function GraphiQLEditor({config, apiVersion}: GraphiQLEditorProps) {
       })
     }
 
-    // 4. WELCOME_MESSAGE tab LAST
-    tabs.push({
-      query: WELCOME_MESSAGE,
-    })
-
     return tabs
   }, [config.defaultQueries, config.query, config.variables])