Skip to content

Commit

Permalink
Remove dependency on fast-json-stable-stringify.
Browse files Browse the repository at this point in the history
> 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/fast-json-stable-stringify@2.1.0/+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
  • Loading branch information
benjamn committed May 14, 2021
1 parent 8ef9e64 commit 897e36e
Show file tree
Hide file tree
Showing 3 changed files with 5 additions and 5 deletions.
3 changes: 2 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,6 @@
"@wry/context": "^0.6.0",
"@wry/equality": "^0.4.0",
"@wry/trie": "^0.3.0",
"fast-json-stable-stringify": "^2.0.0",
"graphql-tag": "^2.12.3",
"hoist-non-react-statics": "^3.3.2",
"optimism": "^0.16.1",
Expand Down
6 changes: 3 additions & 3 deletions src/utilities/graphql/storeUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import {
SelectionSetNode,
} from 'graphql';

import stringify from 'fast-json-stable-stringify';
import { InvariantError } from 'ts-invariant';
import { FragmentMap, getFragmentFromSelection } from './fragments';

Expand Down Expand Up @@ -181,6 +180,7 @@ export function getStoreKeyName(
fieldName: string,
args?: Record<string, any> | null,
directives?: Directives,
stringify: (value: any) => string = JSON.stringify,
): string {
if (
args &&
Expand All @@ -202,7 +202,7 @@ export function getStoreKeyName(
filteredArgs[key] = args[key];
});

return `${directives['connection']['key']}(${JSON.stringify(
return `${directives['connection']['key']}(${stringify(
filteredArgs,
)})`;
} else {
Expand All @@ -224,7 +224,7 @@ export function getStoreKeyName(
Object.keys(directives).forEach(key => {
if (KNOWN_DIRECTIVES.indexOf(key) !== -1) return;
if (directives[key] && Object.keys(directives[key]).length) {
completeFieldName += `@${key}(${JSON.stringify(directives[key])})`;
completeFieldName += `@${key}(${stringify(directives[key])})`;
} else {
completeFieldName += `@${key}`;
}
Expand Down

0 comments on commit 897e36e

Please sign in to comment.