Feature/1936 no queryclient set in devtools

[TkDodo]

closes #1936

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tannerlinsley/react-query/66ZNovxjNgrVnQKVXS6mQwJ4zVeD
✅ Preview: https://react-query-git-fork-tkdodo-feature-1936-no-queryclie-fe3c87.vercel.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 1e18f1c:

Sandbox	Source
tannerlinsley/react-query: basic	Configuration
tannerlinsley/react-query: basic-typescript	Configuration

[Ephem]

Nice!

I have no idea if there is any extra build config that is needed to support this as well. When I went back to my original PR for hydration, I saw there was some external and globals-config stuff in the rollup config that might be relevant.

I haven't checked if that's the case, but might be worth double checking if this PR doesn't bundle the entire react-query into the devtools package. 😄

[TkDodo]

so I downloaded: https://pkg.csb.dev/tannerlinsley/react-query/commit/6a704898/react-query

and it doesn't look like the devtools package contains a copy of react-query - it is also the same size as before.

The rollup config changed significantly with v3 and there is now no globals-config anymore

do you think we can merge this? Is the eslint-disable acceptable?

[Ephem]

That's good! This warning when building doesn't look great though:

According to this article (now pretty old) Rollup tries to add external and globals for you automatically for unresolved dependencies, but prints a warning. In this case, it seems as if it's guessing the wrong name for the global name though (reactQuery instead of ReactQuery). I think this means this PR can break in some cases (when loading React Query/devtools from a CDN?).

Since it's a one line change and needs the exact same fixes, maybe you'd like to fix the relative import in the hydration package in this PR as well? In that case, I could verify that it works, otherwise I'll open a separate PR for that. 😄

[Ephem]

I think maybe a rollup config like this would work and be flexible to fix the relative imports that exists in other packages as well?

import babel from 'rollup-plugin-babel'
import { terser } from 'rollup-plugin-terser'
import size from 'rollup-plugin-size'
import externalDeps from 'rollup-plugin-peer-deps-external'
import resolve from 'rollup-plugin-node-resolve'
import commonJS from 'rollup-plugin-commonjs'
import visualizer from 'rollup-plugin-visualizer'
import replace from '@rollup/plugin-replace'

const inputSrcs = [
  ['src/index.ts', 'ReactQuery', 'react-query'],
  ['src/core/index.ts', 'ReactQueryCore', 'react-query-core'],
  [
    'src/devtools/index.ts',
    'ReactQueryDevtools',
    'react-query-devtools',
    {
      extraExternals: ['react-query'],
      extraGlobals: { 'react-query': 'ReactQuery' },
    },
  ],
  [
    'src/hydration/index.ts',
    'ReactQueryHydration',
    'react-query-hydration',
    {
      extraExternals: ['react-query'],
      extraGlobals: { 'react-query': 'ReactQuery' },
    },
  ],
  [
    'src/persistQueryClient-experimental/index.ts',
    'ReactQueryPersistQueryClientExperimental',
    'persistQueryClient-experimental',
  ],
  [
    'src/createLocalStoragePersistor-experimental/index.ts',
    'ReactQueryCreateLocalStoragePersistorExperimental',
    'createLocalStoragePersistor-experimental',
  ],
  [
    'src/broadcastQueryClient-experimental/index.ts',
    'ReactQueryBroadcastQueryClientExperimental',
    'broadcastQueryClient-experimental',
  ],
]

const extensions = ['.js', '.jsx', '.es6', '.es', '.mjs', '.ts', '.tsx']
const babelConfig = { extensions, runtimeHelpers: true }
const resolveConfig = { extensions }

export default inputSrcs
  .map(
    ([input, name, file, { extraExternals = [], extraGlobals = {} } = {}]) => {
      const external = ['react', 'react-dom', ...extraExternals]

      const globals = {
        react: 'React',
        'react-dom': 'ReactDOM',
        ...extraGlobals,
      }

      return [
        {
          input: input,
          output: {
            name,
            file: `dist/${file}.development.js`,
            format: 'umd',
            sourcemap: true,
            globals,
          },
          external,
          plugins: [
            resolve(resolveConfig),
            babel(babelConfig),
            commonJS(),
            externalDeps(),
          ],
        },
        {
          input: input,
          output: {
            name,
            file: `dist/${file}.production.min.js`,
            format: 'umd',
            sourcemap: true,
            globals,
          },
          external,
          plugins: [
            replace({
              'process.env.NODE_ENV': `"production"`,
              delimiters: ['', ''],
            }),
            resolve(resolveConfig),
            babel(babelConfig),
            commonJS(),
            externalDeps(),
            terser(),
            size(),
            visualizer({
              filename: 'stats-react.json',
              json: true,
            }),
          ],
        },
      ]
    }
  )
  .flat()

[TkDodo]

Since it's a one line change and needs the exact same fixes, maybe you'd like to fix the relative import in the hydration package in this PR as well? In that case, I could verify that it works, otherwise I'll open a separate PR for that. 😄

let's do a separate PR as a follow up please. from what I can see, hydration imports multiple things relatively ...

[Ephem]

Since it's a one line change and needs the exact same fixes, maybe you'd like to fix the relative import in the hydration package in this PR as well? In that case, I could verify that it works, otherwise I'll open a separate PR for that. 😄

let's do a separate PR as a follow up please. from what I can see, hydration imports multiple things relatively ...

Of course! I'll take care of that tomorrow. 😄

[Ephem]

I'm not familiar enough with the devtools to verify the fix itself but saw that was done in the issue, this looks good to me! 💯

[Ephem]

NIT: Since we added react-query as an external and global for all entry points, I think it makes sense to configure this ignore to be global instead of a devtools-specific override as well? I definitely don't have strong feelings on it though.

[TkDodo]

I just thought that maybe it's a good idea to avoid wrong auto-imports or so, but being in line with the rollup config is also valuable: 7398b24

uff, and the missing comma 🤦
1e18f1c

[tannerlinsley]

🎉 This PR is included in version 3.13.7 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀