Fields Dropped when using a Fragment

Intended outcome: When querying with a fragment, the fields specified by the fragment should not be undefined.

Actual outcome: Fields specified by a fragment will get completely dropped after running the merge function. The rest of the query data is still there, even though returnPartialData is false.

How to reproduce the issue: https://github.com/dylanwulf/react-apollo-error-template/tree/fragment-dropping-fields Please use branch fragment-dropping-fields.

Versions

  System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 14.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.21.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.12 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 91.0.4472.101
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.48)
  npmPackages:
    @apollo/client: ^3.3.20 => 3.3.20

[benjamn]

@dylanwulf Thanks for the reproduction!

This took me a while to track this down, so I know your pain, but your paginatedQueryMerge function seems to be dropping the __typename field from FruitsQueryResult and VegetablesQueryResult objects, despite merging the rest of the fields successfully:

diff --git a/src/index.jsx b/src/index.jsx
index cc291a6..0915093 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -185,30 +185,31 @@ function App() {
 const paginatedQueryMerge = (
 	existing,
 	incoming,
 	{ args },
 ) => {
 	if (existing == null || args == null || args.page == null || args.page === 1) {
 		return incoming;
 	}
 
 	const mergedArray = [...existing.results];
 	const offset = (args.page - 1) * 3; // page size is hardcoded to 3 for this reproduction
 	incoming.results.forEach((val, index) => {
 		mergedArray[offset + index] = val;
 	});
 	return {
+		__typename: incoming.__typename || existing.__typename,
 		meta: { ...existing.meta, ...incoming.meta },
 		results: mergedArray,
 	};
 };
 
 const client = new ApolloClient({
   cache: new InMemoryCache({
     possibleTypes: { QueryResult: ['FruitsQueryResult', 'VegetablesQueryResult'] },
     typePolicies: {
       Query: {
         fields: {
           fruits: { keyArgs: [], merge: paginatedQueryMerge },
           vegetables: { keyArgs: [], merge: paginatedQueryMerge },
         },
       },

If the __typename: "FruitsQueryResult" field is lost, then when the client reads from the cache for the final results (after fetchMore finishes), the ...ResultFragment in that query fails to match/spread, because the cache can’t verify the FruitsQueryResult object is a subtype of QueryResult without knowing its __typename.

Maybe there’s an opportunity for a warning here? Preserving __typename fields is probably worth some console noise. Let me know if you have any thoughts about how that might work!

[dylanwulf]

@benjamn Wow, I feel dumb now 😅. Thank you for getting back to me so quickly! Really appreciate it. As for the warning idea, I definitely would be in support of something like that. Not really sure about the exact details of how it should work though. I’ll leave this issue open in case you want to use it to track the warning idea, but otherwise feel free to close! Thanks again!