Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[rfc] Add image preview functionality #789

Merged
merged 2 commits into from
Apr 30, 2019

Conversation

dunnbobcat
Copy link
Contributor

This adds a tooltip-like component for previewing images in GraphQL
responses. The ImagePreview component tries to detect if a string is an
image URL and, if so, renders the image plus some metadata (dimensions
and mime type).

I found that if you specify a ResultsTooltip on the ResultViewer, it
unconditionally renders no matter what. So I added a hacky way to
prevent that from happening (the static shouldRender function). I don't
really 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 and
moused over the image URL in the results panel.

2019-04-18 14 01 10

This adds a tooltip-like component for previewing images in GraphQL
responses. The ImagePreview component tries to detect if a string is an
image URL and, if so, renders the image plus some metadata (dimensions
and mime type).

I found that if you specify a ResultsTooltip on the ResultViewer, it
unconditionally renders no matter what. So I added a hacky way to
prevent that from happening (the static shouldRender function). I don't
really like this, but I don't see an obvious workaround without
introducing a new codemirror addon.
@@ -26,16 +26,16 @@ const TestEnum = new GraphQLEnumType({
values: {
RED: { description: 'A rosy color' },
GREEN: { description: 'The color of martians and slime' },
BLUE: { description: 'A feeling you might have if you can\'t use GraphQL' },
}
BLUE: { description: "A feeling you might have if you can't use GraphQL" },
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure why all these formatting changes got pulled in…

@asiandrummer asiandrummer merged commit 3b19089 into graphql:master Apr 30, 2019
@dunnbobcat dunnbobcat deleted the imagepreview branch May 1, 2019 16:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants