[BUG] Large queries result in malformed / unrenderable JSON

[benhutton]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

Queries with results longer than a certain length (I don't know what the length is) collapse the result into a single line that doesn't render properly. They render what looks like a single line of json. This then doesn't play nice with our "Download CSV" extension.

Expected Behavior

Queries of any length should render properly across multiple lines.

Steps To Reproduce

Run an introspection query like https://gist.github.com/benhutton/3df56090a754365f35b024fcb5f4cd08 against a large schema

(This happens with other long queries. Short queries render just fine.)

Environment

- OS: Ubuntu 24.04 and MacOS 14.5
- Browser:
- Platform: installed clients for both ubuntu and macos
- Version: 7.2.0

Both I and a colleague both hit this issue when upgrading our installed clients to 7.2.0. I use Ubuntu and he uses MacOS

Additional context

No response

[imolorhe]

What does the download CSV button do?

[benhutton]

@imolorhe the Download CSV button comes from this plugin: https://altairgraphql.dev/docs/plugins/popular-plugins#altair-graphql-plugin-json-to-csv

It takes the json, uploads it to a third party service which returns CSV, and then stores that as a file on the file system.

The code is here: https://github.com/desiringgod/altair-graphql-plugin-json-to-csv/blob/master/index.js

[imolorhe]

Thanks. Looks like that plugin will need an update. I'll reach out.

[imolorhe]

This issue should be fixed. The issue in the plugin should be fixed by this PR desiringgod/altair-graphql-plugin-json-to-csv#10.

Please can you verify?

[benhutton]

@imolorhe thanks

Altair 7.2.1 fixes the rendering problem. I merged the PR for the plugin... remind me what I need to do beyond that to get the plugin to load. Specifying the version (github:[email protected]::[repo]->[desiringgod/altair-graphql-plugin-json-to-csv]) does not seem to load the plugin, and if I don't specify the version, I think I get the old broken one. What am I missing?

[imolorhe]

The plugin should be using the latest version by now if you published the new version to npm (you can check the downloaded manifest.json file, etc)

[benhutton]

@imolorhe okay... we haven't been doing that, and I can try to figure that out.

BUT, what about running it straight off of github? Shouldn't that be working?

[imolorhe]

Yes, but that checks for the github tag release, which the plugin doesn't currently have.

In the network tab, you can see that Altair tries to fetch the files for the version from github but fails with a 404. It leverages jsdeliver CDN API to fetch the artifacts (docs)

[benhutton]

@imolorhe okay thanks. I've got the plugin loaded and can see the queries in the network tab.

Unfortunately, things are still failing. I am wondering if the new queryResults has newlines and spaces in it and the old one does not? Put another way, do you think the output of queryResults would validate with something like https://jsonlint.com/ ?

[imolorhe]

I took a look at it locally. All queryResults are strings now and not objects (to account for the variety of responses from the server) so you shouldn't JSON.stringify anymore

[benhutton]

okay, I've got it fixed! Thanks!