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

Base: 96.36% // Head: 91.25% // Decreases project coverage by -5.11% ⚠️

Coverage data is based on head (a28c5a0) compared to base (eab6e2c).
Patch has no changes to coverable lines.

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     

Impacted Files	Coverage Δ
src/react/utils.ts
src/react/useMutation.ts
src/core/logger.ts
src/core/mutationCache.ts
src/core/mutationObserver.ts
src/core/onlineManager.ts
src/react/useIsMutating.ts
src/devtools/styledComponents.ts
src/devtools/useLocalStorage.ts
src/react/QueryErrorResetBoundary.tsx
... and 145 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[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 * as React from 'react'

const IsRestoringContext = React.createContext(false)

export const useIsRestoring = () => React.useContext(IsRestoringContext)
export const IsRestoringProvider = IsRestoringContext.Provider

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