refactor: display tanstack apis in status cli table (#1198)

# Overview

closed: #1119 / related: #1113

- I have modified the logic for displaying the APIs that re-export
tanstack/react-query v5.

| @tanstack/react-query@4 | @tanstack/react-query@5 |
| --- | --- |
|<img width="543" alt="image"
src="https://github.com/user-attachments/assets/04ff703f-fe3b-4d74-9494-0ad6ffaa0da3">|<img
width="548" alt="image"
src="https://github.com/user-attachments/assets/b34cd121-9536-4335-94eb-f5e435001300">|


## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

---------

Co-authored-by: Jonghyeon Ko <jonghyeon@toss.im>

.changeset/tasty-dolphins-retire.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/react-query": patch
+---
+
+fix: display tanstack apis in status cli table

packages/react-query/src/scripts/utils/commands.spec.ts

@@ -1,12 +1,13 @@
 import fs from 'fs'
+import { noop } from '@suspensive/utils'
 import type { Mock, MockInstance } from 'vitest'
 import packageJson from '../../../package.json'
 import { fixAction, statusAction, switchAction } from './commands'
 import {
-  getExportAPIsWithoutSuspensive,
   getIndexFileContent,
   getPackageJson,
   getSuspensiveReactQueryPackageJson,
+  getTanStackReactQueryAPIs,
   getTanStackReactQueryPackageJson,
   getTargetSuspensiveReactQueryAPIs,
   getTargetSuspensiveReactQueryVersion,
@@ -24,8 +25,8 @@ describe('commands', () => {
   let consoleWarnSpy: MockInstance
 
   beforeEach(() => {
-    consoleLogSpy = vi.spyOn(console, 'log').mockImplementation((): void => {})
-    consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    consoleLogSpy = vi.spyOn(console, 'log').mockImplementation(noop)
+    consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(noop)
 
     const getPackageJsonMock = getPackageJson as Mock
     getPackageJsonMock.mockReturnValue(packageJson)
@@ -39,10 +40,10 @@ describe('commands', () => {
     getTargetSuspensiveReactQueryVersionMock.mockReturnValue('5')
     const getTargetSuspensiveReactQueryAPIsMock = getTargetSuspensiveReactQueryAPIs as Mock
     getTargetSuspensiveReactQueryAPIsMock.mockReturnValue([])
-    const getExportAPIsWithoutSuspensiveMock = vi.mocked(getExportAPIsWithoutSuspensive)
-    getExportAPIsWithoutSuspensiveMock.mockReturnValue([])
+    const getTanStackReactQueryAPIsMock = getTanStackReactQueryAPIs as Mock
+    getTanStackReactQueryAPIsMock.mockReturnValue([])
 
-    vi.mocked(switchVersion).mockImplementation(() => {})
+    vi.mocked(switchVersion).mockImplementation(noop)
   })
 
   afterEach(() => {

packages/react-query/src/scripts/utils/package.spec.ts

@@ -1,7 +1,6 @@
 import tanStackReactQueryPackageJson from '@tanstack/react-query/package.json'
 import packageJson from '../../../package.json'
 import {
-  getExportAPIsWithoutSuspensive,
   getPackageJson,
   getSuspensiveReactQueryPackageJson,
   getTanStackReactQueryPackageJson,
@@ -59,10 +58,4 @@ describe('package', () => {
     expect(result).toBeDefined()
     expect(result.name).toBe('@suspensive/react-query-4')
   })
-
-  it('should get exported APIs without @suspensive/react-query', () => {
-    const apis = getExportAPIsWithoutSuspensive()
-
-    expect(apis).toEqual(expect.arrayContaining([]))
-  })
 })

packages/react-query/src/scripts/utils/package.ts

@@ -84,24 +84,20 @@ export function getTargetSuspensiveReactQueryAPIs(): string[] {
   return results
 }
 
-export function getExportAPIsWithoutSuspensive(): string[] {
-  const indexFileContent = getIndexFileContent(__dirname, '../../')
-
-  const modules = indexFileContent.matchAll(/export \* from ['"]([^'"]+)['"]/g)
-  const results: string[] = []
-
-  for (const [, moduleName] of modules) {
-    if (!moduleName.includes('@suspensive/react-query')) {
-      const module = loadModule<Record<string, unknown>>(moduleName)
-
-      if (!module.isSuccess) {
-        console.warn('[@suspensive/react-query]', 'Module not found:', moduleName)
-        exit(1)
-      }
-
-      results.push(...Object.keys(module.exports).reverse())
+export function getTanStackReactQueryAPIs(majorVersionOfTanStackQuery: string): string[] {
+  switch (majorVersionOfTanStackQuery) {
+    case '5':
+      return [
+        'useSuspenseQuery',
+        'useSuspenseQueries',
+        'useSuspenseInfiniteQuery',
+        'queryOptions',
+        'infiniteQueryOptions',
+      ]
+    case '4':
+      return ['-']
+    default: {
+      throw new Error('@tanstack/react-query version is required')
     }
   }
-
-  return results
 }

packages/react-query/src/scripts/utils/table.ts

@@ -1,8 +1,8 @@
 import Table from 'cli-table3'
 import {
-  getExportAPIsWithoutSuspensive,
   getPackageJson,
   getSuspensiveReactQueryPackageJson,
+  getTanStackReactQueryAPIs,
   getTanStackReactQueryPackageJson,
   getTargetSuspensiveReactQueryAPIs,
 } from './package'
@@ -13,30 +13,30 @@ export function getStatusTable(currentTargetVersion: string) {
   const tanStackReactQueryMajorVersion = tanStackReactQueryPackageJson.version.split('.')[0]
   const targetSuspensiveReactQueryPackageJson = getSuspensiveReactQueryPackageJson(tanStackReactQueryMajorVersion)
   const isCompatible = currentTargetVersion === tanStackReactQueryMajorVersion
-  const suspensiveAPIs = getTargetSuspensiveReactQueryAPIs()
-  const exportAPIs = getExportAPIsWithoutSuspensive()
+  const suspensiveReactQueryAPIs = getTargetSuspensiveReactQueryAPIs()
+  const tanStackReactQueryAPIs = getTanStackReactQueryAPIs(tanStackReactQueryMajorVersion)
 
   const table = new Table({
     head: [
-      // @ts-expect-error Type '{ content: string; colSpan: number; hAlign: string; }' is not assignable to type 'string'
+      // @ts-expect-error Type
       { content: `${packageJson.name}@${packageJson.version}`, colSpan: 2 },
       'status',
       'available interfaces',
     ],
     style: { head: ['cyan'] },
-    colWidths: [10, 30, 10, 36],
+    colWidths: [10, 30, 8, 36],
     wordWrap: true,
   })
   table.push([
     { content: 'exports from', rowSpan: 2 },
     `@suspensive/react-query-${currentTargetVersion}\n@${targetSuspensiveReactQueryPackageJson.version}`,
     isCompatible ? '🟢' : '❌',
-    suspensiveAPIs.join(' '),
+    suspensiveReactQueryAPIs.filter((api) => !tanStackReactQueryAPIs.includes(api)).join(' '),
   ])
   table.push([
     `@tanstack/react-query\n@${tanStackReactQueryPackageJson.version}`,
     isCompatible ? '🟢' : '❌',
-    exportAPIs.length > 0 ? exportAPIs.join(' ') : '-',
+    tanStackReactQueryAPIs.join(' '),
   ])
   if (!isCompatible) {
     table.push([{ content: `You should \`npx srq switch ${tanStackReactQueryMajorVersion}\` to fix this`, colSpan: 4 }])