graphql-inspector
graphql-inspector copied to clipboard
Implement visual diff
This pull request adds a visual diff between two GraphQL schemas.
It should significantly improve the developer experience (DX) as compared to plaintext JSON diff.
Added fields are marked in green color, deleted in red and modified in yellow. Every change is explained in tooltip on affected field hover.

@kamilkisiela @dotansimha @ardatan @Urigo
Also visual diff from this pull request could be a very useful addition to GraphQL Hive:

All that is needed is to execute the next GraphQL query to https://app.graphql-hive.com/api/proxy endpoint
query compare($organization: ID!, $project: ID!, $target: ID!, $version: ID!) {
schemaCompareToPrevious(
selector: {organization: $organization, project: $project, target: $target, version: $version}
) {
__typename
...SchemaCompareResultFields
...SchemaCompareErrorFields
}
schemaVersion(
selector: {organization: $organization, project: $project, target: $target, version: $version}
) {
__typename
...SchemaVersionFields
}
}
fragment SchemaCompareResultFields on SchemaCompareResult {
initial
changes {
total
nodes {
...SchemaChangeFields
__typename
}
__typename
}
diff {
before
after
__typename
}
}
fragment SchemaChangeFields on SchemaChange {
path
message
criticality
}
fragment SchemaCompareErrorFields on SchemaCompareError {
message
}
fragment SchemaVersionFields on SchemaVersion {
id
date
valid
commit {
id
author
service
commit
__typename
}
}
and compare data.schemaCompareToPrevious.diff.before and data.schemaCompareToPrevious.diff.after from response.
Hi @FluorescentHallucinogen , Thank you for your contribution. At the moment we are not looking into supporting this kind of feature in Inspector, because we think it might make maintenance more complicated, and since we think that visual diff is working fine, but it's not scalable after ~50 types.
I do think this PR is a good reference for users who wants to create a custom setup on top of Voyager and Inspector, so maybe we can convert that into an example?