[rfc] Add image preview functionality #789
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This adds a tooltip-like component for previewing images in GraphQL
responses. The
ImagePreview
component tries to detect if a string is animage URL and, if so, renders the image plus some metadata (dimensions
and mime type).
I found that if you specify a
ResultsTooltip
on theResultViewer
, itunconditionally renders no matter what. So I added a hacky way to
prevent that from happening (the static
shouldRender
function). I don'treally like this, but I don't see an obvious workaround without
introducing a new codemirror addon.
To test this, I added an image asset (the GraphQL logo in SVG) and hard-
coded it in the schema as
test.image
. Then I fired up GraphiQL andmoused over the image URL in the results panel.