feat(client components): add use client directive at the top of files having client components

[girishsontakke]

This PR is addressing the improvement suggested in #4689.

[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 a28c5a0:

Sandbox	Source
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

[TkDodo]

Thanks. I think there are still a couple of places missing like:

• useIsFetching
• useIsMutating
• the devtools
• the react-query-persist package

[TkDodo]

not sure where all the conflicts are coming from. can you update with main once more please?

[girishsontakke]

not sure where all the conflicts are coming from. can you update with main once more please?

Sure, I have removed the conflicts.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.25%. Comparing base (eab6e2c) to head (a28c5a0).
⚠️ Report is 2966 commits behind head on main.

❗ There is a different number of reports uploaded between BASE (eab6e2c) and HEAD (a28c5a0). Click for more details.

HEAD has 2 uploads less than BASE

Flag	BASE (eab6e2c)	HEAD (a28c5a0)
	3	1

Additional details and impacted files

@@ Coverage Diff @@## main #4738 +/- ##
==========================================
- Coverage 96.36% 91.25% -5.11% 
==========================================
Files 45 110 +65 Lines 2281 4116 +1835 Branches 640 1057 +417 ==========================================
+ Hits 2198 3756 +1558 - Misses 80 339 +259 - Partials 3 21 +18 

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[TkDodo]

there are more things that should be client components. Basically, everything that uses state, effects or context needs to be a client component. I haven't looked at the full list, but:

• hydrate.tsx is definitely a client component
• isRestoring.tsx` has react context

[Ephem]

Thanks for working on this!

I finally got around to do some testing, and I actually think we should not include 'use client' at the top of hooks-only files. First of all, it doesn't really have an effect because the components that use the hooks still needs to include the directive.

Second, having it in the hooks-only files actually hurts in a sense. If you forget to add 'use client' to a component that uses one of these hooks (will be a very common mistake in userland), the default is that you get a nice error message from React:

But if you have 'use client' in the hooks file, you instead get an unreadable build error (I guess because the file is still removed from the SC-bundle):

@TkDodo I think this also means we might want to split any file that has both client components and hooks into two separate ones, like Hydrate.tsx and QueryClientProvider.tsx? So you can use the component as a client component, but still get a nice error message if you try to say use useQueryClient in a nested Server Component somewhere? I think for this PR it's probably fine to just do 'use client' at the top of those files and live with a bad worse error message for a while though, it's all pretty experimental anyway. 😄

[TkDodo]

I think this also means we might want to split any file that has both client components and hooks into two separate ones, like Hydrate.tsx and QueryClientProvider.tsx?

oh yeah, good idea. I think in v5 the Hydrate is no longer a problem because we have removed the hook already, but it makes sense for QueryClientProvider

[Ephem]

I took the liberty of removing the 'use client' from the hooks files again, but didn't split the files, I think we can do that later. I think isRestoring.tsx is another annoying candidate btw:

'use client'import*asReactfrom'react'constIsRestoringContext=React.createContext(false)exportconstuseIsRestoring=()=>React.useContext(IsRestoringContext)exportconstIsRestoringProvider=IsRestoringContext.Provider

Any such context/useContext pattern will need to be split into two files to get good error messages for the useContext part..

[girishsontakke]

This PR is addressing the improvement suggested in #4689.

[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 a28c5a0:

Sandbox	Source
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

[TkDodo]

Thanks. I think there are still a couple of places missing like:

• useIsFetching
• useIsMutating
• the devtools
• the react-query-persist package

[TkDodo]

not sure where all the conflicts are coming from. can you update with main once more please?

[girishsontakke]

not sure where all the conflicts are coming from. can you update with main once more please?

Sure, I have removed the conflicts.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.25%. Comparing base (eab6e2c) to head (a28c5a0).
⚠️ Report is 2966 commits behind head on main.

❗ There is a different number of reports uploaded between BASE (eab6e2c) and HEAD (a28c5a0). Click for more details.

HEAD has 2 uploads less than BASE

Flag	BASE (eab6e2c)	HEAD (a28c5a0)
	3	1

Additional details and impacted files

@@ Coverage Diff @@## main #4738 +/- ##
==========================================
- Coverage 96.36% 91.25% -5.11% 
==========================================
Files 45 110 +65 Lines 2281 4116 +1835 Branches 640 1057 +417 ==========================================
+ Hits 2198 3756 +1558 - Misses 80 339 +259 - Partials 3 21 +18 

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[TkDodo]

there are more things that should be client components. Basically, everything that uses state, effects or context needs to be a client component. I haven't looked at the full list, but:

• hydrate.tsx is definitely a client component
• isRestoring.tsx` has react context

[Ephem]

Thanks for working on this!

I finally got around to do some testing, and I actually think we should not include 'use client' at the top of hooks-only files. First of all, it doesn't really have an effect because the components that use the hooks still needs to include the directive.

Second, having it in the hooks-only files actually hurts in a sense. If you forget to add 'use client' to a component that uses one of these hooks (will be a very common mistake in userland), the default is that you get a nice error message from React:

But if you have 'use client' in the hooks file, you instead get an unreadable build error (I guess because the file is still removed from the SC-bundle):

@TkDodo I think this also means we might want to split any file that has both client components and hooks into two separate ones, like Hydrate.tsx and QueryClientProvider.tsx? So you can use the component as a client component, but still get a nice error message if you try to say use useQueryClient in a nested Server Component somewhere? I think for this PR it's probably fine to just do 'use client' at the top of those files and live with a bad worse error message for a while though, it's all pretty experimental anyway. 😄

[TkDodo]

I think this also means we might want to split any file that has both client components and hooks into two separate ones, like Hydrate.tsx and QueryClientProvider.tsx?

oh yeah, good idea. I think in v5 the Hydrate is no longer a problem because we have removed the hook already, but it makes sense for QueryClientProvider

[Ephem]

I took the liberty of removing the 'use client' from the hooks files again, but didn't split the files, I think we can do that later. I think isRestoring.tsx is another annoying candidate btw:

'use client'import*asReactfrom'react'constIsRestoringContext=React.createContext(false)exportconstuseIsRestoring=()=>React.useContext(IsRestoringContext)exportconstIsRestoringProvider=IsRestoringContext.Provider

Any such context/useContext pattern will need to be split into two files to get good error messages for the useContext part..

[girishsontakke]

This PR is addressing the improvement suggested in #4689.

[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 a28c5a0:

Sandbox	Source
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

[TkDodo]

Thanks. I think there are still a couple of places missing like:

• useIsFetching
• useIsMutating
• the devtools
• the react-query-persist package

[TkDodo]

not sure where all the conflicts are coming from. can you update with main once more please?

[girishsontakke]

not sure where all the conflicts are coming from. can you update with main once more please?

Sure, I have removed the conflicts.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.25%. Comparing base (eab6e2c) to head (a28c5a0).
⚠️ Report is 2966 commits behind head on main.

❗ There is a different number of reports uploaded between BASE (eab6e2c) and HEAD (a28c5a0). Click for more details.

HEAD has 2 uploads less than BASE

Flag	BASE (eab6e2c)	HEAD (a28c5a0)
	3	1

Additional details and impacted files

@@ Coverage Diff @@## main #4738 +/- ##
==========================================
- Coverage 96.36% 91.25% -5.11% 
==========================================
Files 45 110 +65 Lines 2281 4116 +1835 Branches 640 1057 +417 ==========================================
+ Hits 2198 3756 +1558 - Misses 80 339 +259 - Partials 3 21 +18 

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[TkDodo]

there are more things that should be client components. Basically, everything that uses state, effects or context needs to be a client component. I haven't looked at the full list, but:

• hydrate.tsx is definitely a client component
• isRestoring.tsx` has react context

[Ephem]

Thanks for working on this!

I finally got around to do some testing, and I actually think we should not include 'use client' at the top of hooks-only files. First of all, it doesn't really have an effect because the components that use the hooks still needs to include the directive.

Second, having it in the hooks-only files actually hurts in a sense. If you forget to add 'use client' to a component that uses one of these hooks (will be a very common mistake in userland), the default is that you get a nice error message from React:

But if you have 'use client' in the hooks file, you instead get an unreadable build error (I guess because the file is still removed from the SC-bundle):

@TkDodo I think this also means we might want to split any file that has both client components and hooks into two separate ones, like Hydrate.tsx and QueryClientProvider.tsx? So you can use the component as a client component, but still get a nice error message if you try to say use useQueryClient in a nested Server Component somewhere? I think for this PR it's probably fine to just do 'use client' at the top of those files and live with a bad worse error message for a while though, it's all pretty experimental anyway. 😄

[TkDodo]

I think this also means we might want to split any file that has both client components and hooks into two separate ones, like Hydrate.tsx and QueryClientProvider.tsx?

oh yeah, good idea. I think in v5 the Hydrate is no longer a problem because we have removed the hook already, but it makes sense for QueryClientProvider

[Ephem]

I took the liberty of removing the 'use client' from the hooks files again, but didn't split the files, I think we can do that later. I think isRestoring.tsx is another annoying candidate btw:

'use client'import*asReactfrom'react'constIsRestoringContext=React.createContext(false)exportconstuseIsRestoring=()=>React.useContext(IsRestoringContext)exportconstIsRestoringProvider=IsRestoringContext.Provider

Any such context/useContext pattern will need to be split into two files to get good error messages for the useContext part..

[girishsontakke]

This PR is addressing the improvement suggested in #4689.

[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 a28c5a0:

Sandbox	Source
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

[TkDodo]

Thanks. I think there are still a couple of places missing like:

• useIsFetching
• useIsMutating
• the devtools
• the react-query-persist package

[TkDodo]

not sure where all the conflicts are coming from. can you update with main once more please?

[girishsontakke]

not sure where all the conflicts are coming from. can you update with main once more please?

Sure, I have removed the conflicts.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.25%. Comparing base (eab6e2c) to head (a28c5a0).
⚠️ Report is 2966 commits behind head on main.

❗ There is a different number of reports uploaded between BASE (eab6e2c) and HEAD (a28c5a0). Click for more details.

HEAD has 2 uploads less than BASE

Flag	BASE (eab6e2c)	HEAD (a28c5a0)
	3	1

Additional details and impacted files

@@ Coverage Diff @@## main #4738 +/- ##
==========================================
- Coverage 96.36% 91.25% -5.11% 
==========================================
Files 45 110 +65 Lines 2281 4116 +1835 Branches 640 1057 +417 ==========================================
+ Hits 2198 3756 +1558 - Misses 80 339 +259 - Partials 3 21 +18 

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[TkDodo]

there are more things that should be client components. Basically, everything that uses state, effects or context needs to be a client component. I haven't looked at the full list, but:

• hydrate.tsx is definitely a client component
• isRestoring.tsx` has react context

[Ephem]

Thanks for working on this!

I finally got around to do some testing, and I actually think we should not include 'use client' at the top of hooks-only files. First of all, it doesn't really have an effect because the components that use the hooks still needs to include the directive.

Second, having it in the hooks-only files actually hurts in a sense. If you forget to add 'use client' to a component that uses one of these hooks (will be a very common mistake in userland), the default is that you get a nice error message from React:

But if you have 'use client' in the hooks file, you instead get an unreadable build error (I guess because the file is still removed from the SC-bundle):

@TkDodo I think this also means we might want to split any file that has both client components and hooks into two separate ones, like Hydrate.tsx and QueryClientProvider.tsx? So you can use the component as a client component, but still get a nice error message if you try to say use useQueryClient in a nested Server Component somewhere? I think for this PR it's probably fine to just do 'use client' at the top of those files and live with a bad worse error message for a while though, it's all pretty experimental anyway. 😄

[TkDodo]

I think this also means we might want to split any file that has both client components and hooks into two separate ones, like Hydrate.tsx and QueryClientProvider.tsx?

oh yeah, good idea. I think in v5 the Hydrate is no longer a problem because we have removed the hook already, but it makes sense for QueryClientProvider

[Ephem]

I took the liberty of removing the 'use client' from the hooks files again, but didn't split the files, I think we can do that later. I think isRestoring.tsx is another annoying candidate btw:

'use client'import*asReactfrom'react'constIsRestoringContext=React.createContext(false)exportconstuseIsRestoring=()=>React.useContext(IsRestoringContext)exportconstIsRestoringProvider=IsRestoringContext.Provider

Any such context/useContext pattern will need to be split into two files to get good error messages for the useContext part..

[girishsontakke]

This PR is addressing the improvement suggested in #4689.

[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 a28c5a0:

Sandbox	Source
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

[TkDodo]

Thanks. I think there are still a couple of places missing like:

• useIsFetching
• useIsMutating
• the devtools
• the react-query-persist package

[TkDodo]

not sure where all the conflicts are coming from. can you update with main once more please?

[girishsontakke]

not sure where all the conflicts are coming from. can you update with main once more please?

Sure, I have removed the conflicts.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.25%. Comparing base (eab6e2c) to head (a28c5a0).
⚠️ Report is 2966 commits behind head on main.

❗ There is a different number of reports uploaded between BASE (eab6e2c) and HEAD (a28c5a0). Click for more details.

HEAD has 2 uploads less than BASE

Flag	BASE (eab6e2c)	HEAD (a28c5a0)
	3	1

Additional details and impacted files

@@ Coverage Diff @@## main #4738 +/- ##
==========================================
- Coverage 96.36% 91.25% -5.11% 
==========================================
Files 45 110 +65 Lines 2281 4116 +1835 Branches 640 1057 +417 ==========================================
+ Hits 2198 3756 +1558 - Misses 80 339 +259 - Partials 3 21 +18 

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[TkDodo]

there are more things that should be client components. Basically, everything that uses state, effects or context needs to be a client component. I haven't looked at the full list, but:

• hydrate.tsx is definitely a client component
• isRestoring.tsx` has react context

[Ephem]

Thanks for working on this!

I finally got around to do some testing, and I actually think we should not include 'use client' at the top of hooks-only files. First of all, it doesn't really have an effect because the components that use the hooks still needs to include the directive.

Second, having it in the hooks-only files actually hurts in a sense. If you forget to add 'use client' to a component that uses one of these hooks (will be a very common mistake in userland), the default is that you get a nice error message from React:

But if you have 'use client' in the hooks file, you instead get an unreadable build error (I guess because the file is still removed from the SC-bundle):

@TkDodo I think this also means we might want to split any file that has both client components and hooks into two separate ones, like Hydrate.tsx and QueryClientProvider.tsx? So you can use the component as a client component, but still get a nice error message if you try to say use useQueryClient in a nested Server Component somewhere? I think for this PR it's probably fine to just do 'use client' at the top of those files and live with a bad worse error message for a while though, it's all pretty experimental anyway. 😄

[TkDodo]

I think this also means we might want to split any file that has both client components and hooks into two separate ones, like Hydrate.tsx and QueryClientProvider.tsx?

oh yeah, good idea. I think in v5 the Hydrate is no longer a problem because we have removed the hook already, but it makes sense for QueryClientProvider

[Ephem]

I took the liberty of removing the 'use client' from the hooks files again, but didn't split the files, I think we can do that later. I think isRestoring.tsx is another annoying candidate btw:

'use client'import*asReactfrom'react'constIsRestoringContext=React.createContext(false)exportconstuseIsRestoring=()=>React.useContext(IsRestoringContext)exportconstIsRestoringProvider=IsRestoringContext.Provider

Any such context/useContext pattern will need to be split into two files to get good error messages for the useContext part..

[girishsontakke]

This PR is addressing the improvement suggested in #4689.

[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 a28c5a0:

Sandbox	Source
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

[TkDodo]

Thanks. I think there are still a couple of places missing like:

• useIsFetching
• useIsMutating
• the devtools
• the react-query-persist package

[TkDodo]

not sure where all the conflicts are coming from. can you update with main once more please?

[girishsontakke]

not sure where all the conflicts are coming from. can you update with main once more please?

Sure, I have removed the conflicts.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.25%. Comparing base (eab6e2c) to head (a28c5a0).
⚠️ Report is 2966 commits behind head on main.

❗ There is a different number of reports uploaded between BASE (eab6e2c) and HEAD (a28c5a0). Click for more details.

HEAD has 2 uploads less than BASE

Flag	BASE (eab6e2c)	HEAD (a28c5a0)
	3	1

Additional details and impacted files

@@ Coverage Diff @@## main #4738 +/- ##
==========================================
- Coverage 96.36% 91.25% -5.11% 
==========================================
Files 45 110 +65 Lines 2281 4116 +1835 Branches 640 1057 +417 ==========================================
+ Hits 2198 3756 +1558 - Misses 80 339 +259 - Partials 3 21 +18 

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[TkDodo]

there are more things that should be client components. Basically, everything that uses state, effects or context needs to be a client component. I haven't looked at the full list, but:

• hydrate.tsx is definitely a client component
• isRestoring.tsx` has react context

[Ephem]

Thanks for working on this!

I finally got around to do some testing, and I actually think we should not include 'use client' at the top of hooks-only files. First of all, it doesn't really have an effect because the components that use the hooks still needs to include the directive.

Second, having it in the hooks-only files actually hurts in a sense. If you forget to add 'use client' to a component that uses one of these hooks (will be a very common mistake in userland), the default is that you get a nice error message from React:

But if you have 'use client' in the hooks file, you instead get an unreadable build error (I guess because the file is still removed from the SC-bundle):

@TkDodo I think this also means we might want to split any file that has both client components and hooks into two separate ones, like Hydrate.tsx and QueryClientProvider.tsx? So you can use the component as a client component, but still get a nice error message if you try to say use useQueryClient in a nested Server Component somewhere? I think for this PR it's probably fine to just do 'use client' at the top of those files and live with a bad worse error message for a while though, it's all pretty experimental anyway. 😄

[TkDodo]

I think this also means we might want to split any file that has both client components and hooks into two separate ones, like Hydrate.tsx and QueryClientProvider.tsx?

oh yeah, good idea. I think in v5 the Hydrate is no longer a problem because we have removed the hook already, but it makes sense for QueryClientProvider

[Ephem]

I took the liberty of removing the 'use client' from the hooks files again, but didn't split the files, I think we can do that later. I think isRestoring.tsx is another annoying candidate btw:

'use client'import*asReactfrom'react'constIsRestoringContext=React.createContext(false)exportconstuseIsRestoring=()=>React.useContext(IsRestoringContext)exportconstIsRestoringProvider=IsRestoringContext.Provider

Any such context/useContext pattern will need to be split into two files to get good error messages for the useContext part..

[girishsontakke]

This PR is addressing the improvement suggested in #4689.

[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 a28c5a0:

Sandbox	Source
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

[TkDodo]

Thanks. I think there are still a couple of places missing like:

• useIsFetching
• useIsMutating
• the devtools
• the react-query-persist package

[TkDodo]

not sure where all the conflicts are coming from. can you update with main once more please?

[girishsontakke]

not sure where all the conflicts are coming from. can you update with main once more please?

Sure, I have removed the conflicts.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.25%. Comparing base (eab6e2c) to head (a28c5a0).
⚠️ Report is 2966 commits behind head on main.

❗ There is a different number of reports uploaded between BASE (eab6e2c) and HEAD (a28c5a0). Click for more details.

HEAD has 2 uploads less than BASE

Flag	BASE (eab6e2c)	HEAD (a28c5a0)
	3	1

Additional details and impacted files

@@ Coverage Diff @@## main #4738 +/- ##
==========================================
- Coverage 96.36% 91.25% -5.11% 
==========================================
Files 45 110 +65 Lines 2281 4116 +1835 Branches 640 1057 +417 ==========================================
+ Hits 2198 3756 +1558 - Misses 80 339 +259 - Partials 3 21 +18 

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[TkDodo]

there are more things that should be client components. Basically, everything that uses state, effects or context needs to be a client component. I haven't looked at the full list, but:

• hydrate.tsx is definitely a client component
• isRestoring.tsx` has react context

[Ephem]

Thanks for working on this!

I finally got around to do some testing, and I actually think we should not include 'use client' at the top of hooks-only files. First of all, it doesn't really have an effect because the components that use the hooks still needs to include the directive.

Second, having it in the hooks-only files actually hurts in a sense. If you forget to add 'use client' to a component that uses one of these hooks (will be a very common mistake in userland), the default is that you get a nice error message from React:

But if you have 'use client' in the hooks file, you instead get an unreadable build error (I guess because the file is still removed from the SC-bundle):

@TkDodo I think this also means we might want to split any file that has both client components and hooks into two separate ones, like Hydrate.tsx and QueryClientProvider.tsx? So you can use the component as a client component, but still get a nice error message if you try to say use useQueryClient in a nested Server Component somewhere? I think for this PR it's probably fine to just do 'use client' at the top of those files and live with a bad worse error message for a while though, it's all pretty experimental anyway. 😄

[TkDodo]

I think this also means we might want to split any file that has both client components and hooks into two separate ones, like Hydrate.tsx and QueryClientProvider.tsx?

oh yeah, good idea. I think in v5 the Hydrate is no longer a problem because we have removed the hook already, but it makes sense for QueryClientProvider

[Ephem]

I took the liberty of removing the 'use client' from the hooks files again, but didn't split the files, I think we can do that later. I think isRestoring.tsx is another annoying candidate btw:

'use client'import*asReactfrom'react'constIsRestoringContext=React.createContext(false)exportconstuseIsRestoring=()=>React.useContext(IsRestoringContext)exportconstIsRestoringProvider=IsRestoringContext.Provider

Any such context/useContext pattern will need to be split into two files to get good error messages for the useContext part..

[girishsontakke]

This PR is addressing the improvement suggested in #4689.

[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 a28c5a0:

Sandbox	Source
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

[TkDodo]

Thanks. I think there are still a couple of places missing like:

• useIsFetching
• useIsMutating
• the devtools
• the react-query-persist package

[TkDodo]

not sure where all the conflicts are coming from. can you update with main once more please?

[girishsontakke]

not sure where all the conflicts are coming from. can you update with main once more please?

Sure, I have removed the conflicts.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.25%. Comparing base (eab6e2c) to head (a28c5a0).
⚠️ Report is 2966 commits behind head on main.

❗ There is a different number of reports uploaded between BASE (eab6e2c) and HEAD (a28c5a0). Click for more details.

HEAD has 2 uploads less than BASE

Flag	BASE (eab6e2c)	HEAD (a28c5a0)
	3	1

Additional details and impacted files

@@ Coverage Diff @@## main #4738 +/- ##
==========================================
- Coverage 96.36% 91.25% -5.11% 
==========================================
Files 45 110 +65 Lines 2281 4116 +1835 Branches 640 1057 +417 ==========================================
+ Hits 2198 3756 +1558 - Misses 80 339 +259 - Partials 3 21 +18 

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[TkDodo]

there are more things that should be client components. Basically, everything that uses state, effects or context needs to be a client component. I haven't looked at the full list, but:

• hydrate.tsx is definitely a client component
• isRestoring.tsx` has react context

[Ephem]

Thanks for working on this!

I finally got around to do some testing, and I actually think we should not include 'use client' at the top of hooks-only files. First of all, it doesn't really have an effect because the components that use the hooks still needs to include the directive.

Second, having it in the hooks-only files actually hurts in a sense. If you forget to add 'use client' to a component that uses one of these hooks (will be a very common mistake in userland), the default is that you get a nice error message from React:

But if you have 'use client' in the hooks file, you instead get an unreadable build error (I guess because the file is still removed from the SC-bundle):

@TkDodo I think this also means we might want to split any file that has both client components and hooks into two separate ones, like Hydrate.tsx and QueryClientProvider.tsx? So you can use the component as a client component, but still get a nice error message if you try to say use useQueryClient in a nested Server Component somewhere? I think for this PR it's probably fine to just do 'use client' at the top of those files and live with a bad worse error message for a while though, it's all pretty experimental anyway. 😄

[TkDodo]

I think this also means we might want to split any file that has both client components and hooks into two separate ones, like Hydrate.tsx and QueryClientProvider.tsx?

oh yeah, good idea. I think in v5 the Hydrate is no longer a problem because we have removed the hook already, but it makes sense for QueryClientProvider

[Ephem]

I took the liberty of removing the 'use client' from the hooks files again, but didn't split the files, I think we can do that later. I think isRestoring.tsx is another annoying candidate btw:

'use client'import*asReactfrom'react'constIsRestoringContext=React.createContext(false)exportconstuseIsRestoring=()=>React.useContext(IsRestoringContext)exportconstIsRestoringProvider=IsRestoringContext.Provider

Any such context/useContext pattern will need to be split into two files to get good error messages for the useContext part..