Purpose

This SOP outlines how to use the GraphQL Network Inspector Chrome extension to monitor and analyze GraphQL queries and mutations within Vetspire.
Since every request in Vetspire is initiated via GraphQL, this tool simplifies identifying:

• Endpoints being hit
• Queries and mutations being executed
• Data structures used throughout the system

This is invaluable for:

• Pulling data
• Building extensions
• Custom reporting
• Troubleshooting and debugging

Why This Matters

Understanding Vetspire's GraphQL requests allows team members to:

• Quickly identify the correct queries/mutations
• Troubleshoot system issues effectively
• Develop accurate reporting and data pulls
• Support integrations and custom workflows

Setup

1. Install the Extension

• Visit: GraphQL Network Inspector Chrome Extension
• Click Add to Chrome and confirm installation

2. Open DevTools and Enable the GraphQL Tab

You can open Chrome DevTools in two ways:

• Option 1 (Shortcut):

  • Press F12
  • OR Cmd+Option+I (Mac)
  • OR Ctrl+Shift+I (Windows)

• Option 2 (Menu):

  • Click the three dots in the top-right corner of Chrome
  • Navigate to More Tools → Developer Tools

Once DevTools is open:

• Locate and click on the GraphQL tab (added by the extension)

How to Use in Vetspire

Step 1: Log Into Vetspire

• Perform typical actions like scheduling, updating clients, processing invoices, etc.
• Each action triggers a GraphQL query or mutation—visible in the GraphQL tab.

Step 2: Monitor Requests

Each request displays:

• Operation Name: e.g., CreateAppointment, UpdateClient
• Query Type: query or mutation
• Endpoint URL
• Variables Passed
• Response Data

Step 3: Filter & Search

• Use the filter bar to:
  • Search by Operation Name
  • Narrow down to specific queries/mutations relevant to your needs

Use Cases

Best Practices

• Always test new queries/mutations in Staging before using in Production.
• Double-check variable structures to avoid unintended updates.
• Keep a running list of frequently used operation names for reference.

Troubleshooting Common Issues

Final Note

By mastering the GraphQL Network Inspector, you can streamline workflows, reduce investigation time, and confidently build solutions on top of Vetspire’s GraphQL-based architecture.