Merge pull request #332 from FormidableLabs/remove-deleted-attr-operationName

Replace 'operationName' attr with 'kind'

Author: andyrichardson

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,10 +1,9 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
+title: ""
 labels: Bug
-assignees: ''
-
+assignees: ""
 ---
 
 # About
@@ -17,36 +16,38 @@ Devtools is unresponsive when using on an Android device with expo.
 
 <!-- Replace the below steps with your reproduction. -->
 
- 1. Clone [this example](https://github.com/kadikraman/UrqlTest) react native project
- 2. Plug in Android phone via USB
- 3. Run `yarn install`
- 4. Run `yarn start`
- 5. Open devtools using npx `npx urql-devtools`
+1.  Clone [this example](https://github.com/kadikraman/UrqlTest) react native project
+2.  Plug in Android phone via USB
+3.  Run `yarn install`
+4.  Run `yarn start`
+5.  Open devtools using npx `npx urql-devtools`
 
 ## Expected result
 
 <!-- Tell us what you expected. -->
 
- - App opens on Android phone
- - Urql Devtools opens in standalone window
- - Urql devtools detects app
+- App opens on Android phone
+- Urql Devtools opens in standalone window
+- Urql devtools detects app
 
 ## Actual result
 
 <!-- Tell us what actually happened. -->
 
- - App opens on Android phone
- - Urql devtools opens in standalone window
- - Urql devtools stays on "waiting for exchange" notice
+- App opens on Android phone
+- Urql devtools opens in standalone window
+- Urql devtools stays on "waiting for exchange" notice
 
 # Additional info
 
 <!-- For native bug reports -->
+
 os: `Ubuntu 20.04`
 urql-devtools version: `v0.0.0`
 @urql/devtools version: `v0.0.0`
 
 <!-- For browser extension bug reports -->
+
 browser: `chrome 88 (macOS)`
 extension version: `v0.0.0`
 @urql/devtools version: `v0.0.0`

package.json

@@ -94,7 +94,7 @@
     "@types/ws": "^7.2.6",
     "@typescript-eslint/eslint-plugin": "^4.3.0",
     "@typescript-eslint/parser": "^4.3.0",
-    "@urql/core": "^1.12.3",
+    "@urql/core": "^2.0.0",
     "@urql/devtools": "https://pkg.csb.dev/FormidableLabs/urql-devtools-exchange/commit/89b2a7aa/@urql/devtools",
     "awesome-typescript-loader": "^5.2.1",
     "babel-jest": "^26.3.0",

src/panel/context/Explorer/ast/index.test.tsx

@@ -17,7 +17,7 @@ const expectCorrectOutput = (testcase: TestCase) => {
   const operation: Operation = {
     query: testcase.query,
     variables: testcase.variables,
-    operationName: "query",
+    kind: "query",
     context: { meta: { cacheOutcome: "hit" } },
   } as any;
 

src/panel/context/Explorer/ast/index.ts

@@ -37,7 +37,7 @@ export const handleResponse = ({
   data,
   parsedNodes = {},
 }: HandleResponseArgs): ParsedNodeMap => {
-  if (operation.operationName !== "query") {
+  if (operation.kind !== "query") {
     return parsedNodes;
   }
 

src/panel/pages/events/Timeline.fixture.tsx

@@ -6,7 +6,7 @@ import { Timeline } from "./Timeline";
 
 const operation1 = {
   key: 1,
-  operationName: "query",
+  kind: "query",
   query: gql`
     query Users {
       users {
@@ -23,7 +23,7 @@ const operation1 = {
 
 const operation2 = {
   key: 2,
-  operationName: "mutation",
+  kind: "mutation",
   query: gql`
     mutation AddUser($id: ID!) {
       addUser(id: $id) {

src/panel/pages/events/Timeline.tsx

@@ -100,9 +100,7 @@ export const Timeline: FC<ComponentProps<typeof Page>> = (props) => {
   const sources = useMemo<Operation[]>(
     () =>
       eventOrder.map((key) => {
-        const source = events[key].find(
-          (e) => e.operation.operationName !== "teardown"
-        );
+        const source = events[key].find((e) => e.operation.kind !== "teardown");
 
         // Only events for given source is teardown
         // Unknown source type
@@ -145,7 +143,7 @@ export const Timeline: FC<ComponentProps<typeof Page>> = (props) => {
               key={key}
               events={events[key]}
               style={{
-                display: filter.graphqlType.includes(sources[i].operationName)
+                display: filter.graphqlType.includes(sources[i].kind)
                   ? undefined
                   : "none",
               }}
@@ -166,12 +164,10 @@ export const Timeline: FC<ComponentProps<typeof Page>> = (props) => {
               <TimelineSourceIcon
                 key={s.key}
                 title="Source operation"
-                kind={
-                  s.operationName === "teardown" ? "query" : s.operationName
-                }
+                kind={s.kind === "teardown" ? "query" : s.kind}
                 onClick={handleSourceClick(s)}
                 style={{
-                  display: filter.graphqlType.includes(s.operationName)
+                  display: filter.graphqlType.includes(s.kind)
                     ? undefined
                     : "none",
                 }}

src/panel/pages/events/components/TimelinePane/TimelinePane.fixture.tsx

@@ -14,7 +14,7 @@ const mockDebugEvent: DebugEvent = {
   message: "An operation was executed",
   source: "MyComponent",
   operation: {
-    operationName: "query",
+    kind: "query",
     key: 1,
     context: {
       requestPolicy: "network-only",

src/panel/pages/events/components/TimelinePane/TimelinePane.tsx

@@ -90,7 +90,7 @@ const SourceSection: FC<{ operation: Operation }> = ({ operation }) => (
     <Heading>Key</Heading>
     <p>{operation.key}</p>
     <Heading>Operation type</Heading>
-    <p>{operation.operationName}</p>
+    <p>{operation.kind}</p>
     <br />
     <Heading>Query</Heading>
     <CodeHighlight