From 9b38fc2e758860c61227bfca89747043a4e8a408 Mon Sep 17 00:00:00 2001 From: Max Sadrieh Date: Mon, 27 Jan 2020 13:57:03 -0800 Subject: [PATCH] Feature detect Symbol support. Use string as a fallback. (#5840) * Feature detect Symbol support. Use string as a fallback. IE11 does not support Symbols natively and it is tricky to polyfill them in a spec-compliant way. Instead of using a Symbol to the React object, we can use an equivalent string that is unlikely to conflict to store the ApolloContext object. * Add IE11 mention/comment * Changelog update Co-authored-by: Hugh Willson --- CHANGELOG.md | 3 +++ src/react/context/ApolloContext.ts | 6 +++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cc8accf5952..9f20ea12a90 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -96,6 +96,9 @@ - Fully removed `prettier`. The Apollo Client team has decided to no longer automatically enforce code formatting across the codebase. In most cases existing code styles should be followed as much as possible, but this is not a hard and fast rule.
[@hwillson](https://github.com/hwillson) in [#5227](https://github.com/apollographql/apollo-client/pull/5227) +- Make sure `ApolloContext` plays nicely with IE11 when storing the shared context.
+ [@ms](https://github.com/ms) in [#5840](https://github.com/apollographql/apollo-client/pull/5840) + ### Bug Fixes - `useMutation` adjustments to help avoid an infinite loop / too many renders issue, caused by unintentionally modifying the `useState` based mutation result directly.
diff --git a/src/react/context/ApolloContext.ts b/src/react/context/ApolloContext.ts index 5c60ccb776c..21191a41304 100644 --- a/src/react/context/ApolloContext.ts +++ b/src/react/context/ApolloContext.ts @@ -13,7 +13,11 @@ export interface ApolloContextValue { // Since the created context is React specific, we've decided to attach it to // the `React` object for sharing. -const contextSymbol = Symbol.for('__APOLLO_CONTEXT__'); +// If Symbol's aren't available, we'll use a fallback string as the context +// property (we're looking at you, IE11). +const contextSymbol = typeof Symbol === 'function' ? + Symbol.for('__APOLLO_CONTEXT__') : + '__APOLLO_CONTEXT__'; export function resetApolloContext() { const React = requireReactLazily();