graphql-inspector icon indicating copy to clipboard operation
graphql-inspector copied to clipboard

Implement visual diff

Open FluorescentHallucinogen opened this issue 5 years ago • 1 comments

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.

graphql-visual-diff

FluorescentHallucinogen avatar Oct 18 '20 13:10 FluorescentHallucinogen

@kamilkisiela @dotansimha @ardatan @Urigo

Also visual diff from this pull request could be a very useful addition to GraphQL Hive:

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.

FluorescentHallucinogen avatar Oct 03 '21 11:10 FluorescentHallucinogen

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?

TuvalSimha avatar Jan 26 '23 09:01 TuvalSimha