Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature: Removing React from the default @apollo/client entry point #8190

Open
4 tasks done
hwillson opened this issue May 10, 2021 · 5 comments · Fixed by #9940
Open
4 tasks done

Feature: Removing React from the default @apollo/client entry point #8190

hwillson opened this issue May 10, 2021 · 5 comments · Fixed by #9940
Assignees
@MrDoomBringer
Labels
📦 bundle size 🎄 dependencies ✔ confirmed 🧞‍♂️ enhancement 🍳 breaking change 🔍 investigate Investigate further ⚗️ needs-documentation ⚛️ React-related 👩‍🏭 refactor
Milestone
Release 4.0

Comments

@hwillson
Copy link
Member

hwillson commented May 10, 2021 •
edited by MrDoomBringer
Loading

Apollo Client 3.0 streamlined our client codebases by merging React Apollo and Apollo Link directly into the Apollo Client core. As part of this stepping stone work, we wanted to ensure that React developers adopting Apollo were able to get up and running quickly. To this end, we made our React hooks available from the default @apollo/client entry point. People using Apollo Client that don't want to use React can use the @apollo/client/core entry point instead, which ensures that our React code is tree-shakable.

For Apollo Client 4.0 however, we would like to switch things around so @apollo/client by itself gives access to the Apollo Client core only, and importing from @apollo/client/react will be required to get access to our React hooks. Doing this allows us to make certain assumptions about how people are using Apollo Client and optimize accordingly. It also opens up the possibility of leveraging other view layer integrations.

This work will include:

  • Adjusting @apollo/client and @apollo/client/react accordingly
  • Writing a codemod to help with migration (maybe)
  • Writing a migration guide
  • Updating all AC React docs
@hwillson hwillson added this to the Release 4.0 milestone May 10, 2021
@hwillson hwillson changed the title Feature: Making the Apollo Client React integration opt-in Feature: Removing React from the default @apollo/client entry point May 10, 2021
@benjamn
Copy link
Member

benjamn commented May 13, 2021

We should also separate out the React-specific parts from @apollo/client/testing, as demonstrated by @yskkin in #8181.

benjamn added a commit that referenced this issue May 14, 2021
@benjamn
Remove dependency on fast-json-stable-stringify.
897e36e 
> Note: I am expecting tests to fail for this commit, demonstrating the
importance of using a stable serialization strategy for field arguments.

Although fast-json-stable-stringify has done its job well, it only
provides a "main" field in its package.json file, pointing to a CommonJS
entry point, and does not appear to export any ECMAScript modules.

Thanks to our conversion/abandonment of fast-json-stable-stringify and
other CommonJS-only npm dependencies (zen-observable in #5961 and
graphql-tag in #6074), it should now (after this PR is merged) be
possible to load @apollo/client/core from an ESM-aware CDN like
jsdelivr.net or jspm.io:

  <script type=module
    src="https://cdn.jsdelivr.net/npm/@apollo/client@beta/core/+esm">
  </script>

If you put that script tag in an HTML file, or inject it into the DOM of
any webpage, you will currently see this error:

  Uncaught SyntaxError: The requested module
  '/npm/[email protected]/+esm' does not provide an
  export named 'default'

This list of errors used to be longer, but now the only package left is
fast-json-stable-stringify.

Note that we're loading @apollo/client/core@beta here, not
@apollo/client@beta. The reason @apollo/client itself is not yet
ESM-ready is that react and react-dom are the two remaining
CommonJS-only dependencies, and @apollo/client currently/regrettably
re-exports utilities from @apollo/client/react.

If importing from @apollo/client/core is a burden or feels weird to you,
please know that we are planning to make @apollo/client synonymous with
@apollo/client/core in Apollo Client 4.0, along with making
@apollo/client/react synonymous with the v3 API of @apollo/client,
though of course those will be major breaking changes:
#8190
@benjamn benjamn mentioned this issue May 14, 2021
Merged
@hwillson hwillson mentioned this issue May 15, 2021
Closed
@benjamn benjamn mentioned this issue Jun 16, 2021
Closed
@delroh delroh mentioned this issue Jun 17, 2021
Merged
@hwillson hwillson removed this from the v4.0 - Planned milestone Jul 9, 2021
glen-84 referenced this issue in vuejs/apollo Jul 22, 2021
@Akryum
fix: importing react -_-'
f53bcde
@benmccann benmccann mentioned this issue Feb 4, 2022
Open
@bennypowers bennypowers mentioned this issue Apr 18, 2022
Closed
@nsisodiya
Copy link

Fixing this issue should be treated as humanitarian work.

@hwillson hwillson added the 🔍 investigate Investigate further label May 31, 2022
@jpvajda jpvajda added this to the Release 3.6 milestone Jun 3, 2022
@jpvajda jpvajda modified the milestones: Release 3.6, Release 4.0 Jun 3, 2022
@benjamn benjamn mentioned this issue Jun 21, 2022
Closed
@hwillson hwillson mentioned this issue Jun 21, 2022
Closed
@jpvajda jpvajda mentioned this issue Jun 23, 2022
Closed
@MrDoomBringer MrDoomBringer self-assigned this Jul 19, 2022
@dylanwulf dylanwulf mentioned this issue Jul 21, 2022
Closed
@brillout
Copy link
Contributor

can use the @apollo/client/core entry point instead

FYI, for ESM it needs to be from '@apollo/client/core/index.js' instead of from '@apollo/client/core'. (It seems that Node.js doens't pick up the value node_modules/@apollo/client/core/package.json#module.)

@MrDoomBringer MrDoomBringer mentioned this issue Jul 25, 2022
Merged
2 tasks
@hwillson hwillson linked a pull request Jul 26, 2022 that will close this issue
Moves the React hooks entrypoint from @apollo/client to @apollo/client/react #9940
Merged
2 tasks
@bignimbus
Copy link
Contributor

Fixed in #9940 🚀

storjBuildBot pushed a commit to storj/storj that referenced this issue Dec 13, 2022
@VitaliiShpital
web/satellite: update apollo-client dependency to remove CSP error
17db59e 
This is insane but the problem was caused by the old apollo-client dependency which is 3 years old.
The error was coming from ts-invariant code here
https://github.com/apollographql/invariant-packages/blob/master/packages/ts-invariant/src/invariant.ts#L64

By this change I updated our app to use new @apollo/client dependency but there is one pretty big concern.
This lib has react as a peer dependency (what?!) so to avoid adding react to our vue project I had to import needed functionality from @apollo/client/core instead of just @apollo/client.

There is a discussion here apollographql/apollo-client#7318
According to this ^ apollo team are going to remove react from their peer dependecies list when apollo V4 will be launched.
See apollographql/apollo-client#8190

That's another point why we should move away from using graphql entirely or at least stop using apollo.

Issue:
#5371

Change-Id: Ifd484efbcd9e99d8c2e21d0dab93670c9358e25c
@bignimbus bignimbus mentioned this issue Jan 25, 2023
Closed
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 15, 2023
@gengns gengns mentioned this issue Sep 20, 2023
Closed
@jerelmiller
Copy link
Member

This work was finished quite some time ago and we've changed quite a bit in the react entrypoint since. This is still something we want to do for 4.0 so I'm reopening this issue so we can track progress using the most recent version of the code.

@jerelmiller jerelmiller reopened this Dec 6, 2024
@apollographql apollographql unlocked this conversation Dec 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@MrDoomBringer MrDoomBringer

Labels
📦 bundle size 🎄 dependencies ✔ confirmed 🧞‍♂️ enhancement 🍳 breaking change 🔍 investigate Investigate further ⚗️ needs-documentation ⚛️ React-related 👩‍🏭 refactor
Projects
None yet
Milestone
Release 4.0
9 participants
@benjamn @hwillson @nsisodiya @jerelmiller @brillout @jpvajda @brainkim @bignimbus @MrDoomBringer