fix: display correct name for operations with fragments

src/operation.ts

@@ -7,5 +7,7 @@ export function extractDefinition(
   // We know we always have a single definition, because Apollo validates this before we get here.
   // With more then one query defined, an error like this is thrown and the query is never sent:
   // "react-apollo only supports a query, subscription, or a mutation per HOC. [object Object] had 2 queries, 0 subscriptions and 0 mutations. You can use 'compose' to join multiple operation types to a component"
-  return operation.query.definitions[0] as OperationDefinitionNode;
+  return operation.query.definitions.find(
+    (q) => q.kind === 'OperationDefinition',
+  ) as OperationDefinitionNode;
 }

tests/operation.test.ts

@@ -22,4 +22,37 @@ describe('extractDefinition', () => {
 
     expect(definition.kind).toBe('OperationDefinition');
   });
+
+  it('should get the single operation definition if it includes a fragment', () => {
+    const definition = extractDefinition(
+      makeOperation({
+        query: parse(`
+          fragment CoreCommentFields on Comment {
+            id
+          }
+          query Comments {
+            ...CoreCommentFields
+          }
+        `),
+      }),
+    );
+
+    expect(definition.name?.value).toBe('Comments');
+    expect(definition.kind).toBe('OperationDefinition');
+  });
+
+  it('should get a mutation operation', () => {
+    const definition = extractDefinition(
+      makeOperation({
+        query: parse(`
+          mutation Test {
+            test
+          }
+        `),
+      }),
+    );
+
+    expect(definition.name?.value).toBe('Test');
+    expect(definition.kind).toBe('OperationDefinition');
+  });
 });