[module-detection] TanStack/query

[0xdevalias]

This relates to the 'module-detection' feature described in the following issue:

• Module detection #41

Overview

• https://github.com/TanStack/query

  • Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.

  • Hooks for fetching, caching and updating asynchronous data in React, Solid, Svelte and Vue

Code

Unminifying this source (Ref), module-24396.js/module-55659.js/module-57457.js/etc:

Note: Not including the unminified examples here currently as the file is quite large

Searching for some of the symbols from module-55659.js/module-57457.js on GitHub code search:

• https://github.com/search?q=%22getCurrentQuery%22+%22fetchOptimistic%22+%22updateStaleTimeout%22+%22computeRefetchInterval%22&type=code
• https://github.com/search?q=repo%3ATanStack%2Fquery+%22defaultQueryOptions%22+%22batchCalls%22+%22getOptimisticResult%22+%22getCurrentResult%22+%22isRestoring%22+%22optimistic%22&type=code

Of those results, these look the most promising:

• https://github.com/TanStack/query/blob/67f76b15b597aaa8445e731c71df6af199c57444/packages/query-core/src/queryObserver.ts
• https://github.com/TanStack/query/blob/67f76b15b597aaa8445e731c71df6af199c57444/packages/react-query/src/useQueries.ts
• https://github.com/TanStack/query/blob/67f76b15b597aaa8445e731c71df6af199c57444/packages/react-query/src/useBaseQuery.ts

---

Using the madge CLI/lib that I mentioned in another issue (Ref), I was able to automatically find/generate a graph of all of the module dependencies related to this.

I narrowed down on this by first creating a larger image of all the dependencies in a chunk/etc, finding something that looked like a lib like this, then running it again on that module.

Note also that I haven't manually checked through all of the modules mentioned here yet.

.madgerc

// See: https://github.com/pahen/madge#configuration
{
  "fileExtensions": ["js"],
  "detectiveOptions": {
    "es6": {
      "mixedImports": true,
      "skipTypeImports": true
    },
    "ts": {
      "mixedImports": true,
      "skipTypeImports": true
    }
  }
}

⇒ npx madge --image 24396.svg stage3-unminified/pages/_app/module-24396.js

(blue has dependencies, green doesn't)

madge --json output

⇒ npm run-script madge:json stage3-unminified/pages/_app/module-24396.js

> chatgpt-source-watch@0.0.1 madge:json
> f() { MODULE_PATH="$1"; npx madge --json "$MODULE_PATH"; }; f stage3-unminified/pages/_app/module-24396.js

{
  "module-1371.js": [
    "module-53729.js"
  ],
  "module-16456.js": [],
  "module-24396.js": [
    "module-16456.js",
    "module-55659.js",
    "module-57457.js"
  ],
  "module-28189.js": [],
  "module-28197.js": [],
  "module-31178.js": [],
  "module-35448.js": [],
  "module-36665.js": [],
  "module-37540.js": [
    "module-16456.js",
    "module-28197.js"
  ],
  "module-53729.js": [],
  "module-55659.js": [
    "module-1371.js",
    "module-28189.js",
    "module-35448.js",
    "module-36665.js",
    "module-59463.js",
    "module-67531.js",
    "module-84427.js"
  ],
  "module-57457.js": [
    "module-16456.js",
    "module-28197.js",
    "module-84427.js",
    "module-94402.js",
    "module-99475.js"
  ],
  "module-59463.js": [],
  "module-67531.js": [
    "module-31178.js"
  ],
  "module-84427.js": [
    "module-16456.js"
  ],
  "module-94402.js": [
    "module-16456.js",
    "module-37540.js",
    "module-99475.js"
  ],
  "module-99475.js": [
    "module-16456.js",
    "module-28197.js"
  ]
}