Graphiql: Plugin: query permalinks

[ElijahLynn]

I see #7 and https://github.com/graphql/graphiql/issues/961 and both reference this functionality but it isn't clear if there should be a UI element to do this, out of the box.

Can we get a UI element added to "Share Query" or "Copy link to query" etc.?

I don't see any type of UI element to share a link in https://developer.github.com/v4/explorer/.

I also want to suggest that the history items when clicking the "history" button allow for a right click "copy link". This seems like a good place to put this.

[ElijahLynn]

Looks like this used to be more exposed or it depends on an opt-in implementation detail. https://github.com/graphql/graphiql/issues/173

There are performance concerns for a default. But if it was only generated when right clicking on a history item then that would be perfect.

[acao]

the query string parser is actually not built into graphiql yet, so that
makes things a little complicated. its just implemented as part of the demo

we are about to overhaul the react implementation, so this is something we
can add as part of the forthcoming history explorer plugin

On Tue, Nov 19, 2019 at 2:59 PM Elijah Lynn [e-mail]
wrote:

Looks like this used to be more exposed or it depends on an opt-in
implementation detail. #173
https://github.com/graphql/graphiql/issues/173

There are performance concerns for a default. But if it was only generated
when right clicking on a history item then that would be perfect.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/graphql/graphiql/issues/1003?email_source=notifications&email_token=AAKOFF765USJV6CVSEAGN2TQURATVA5CNFSM4JPIROY2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEPRHOQ#issuecomment-555684794,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAKOFF7FEQAKK3K5NEJZDD3QURATVANCNFSM4JPIROYQ
.

[ElijahLynn]

That would be fantastic @acao, thanks for considering this!

[ElijahLynn]

For those wondering how to generate this manually, I found that there are just two query params, variables & query. I used @meyerweb's URL dencoder tool to convert the query and variables into properly encoded URLs.

endpoint + ?variables= + <variables dencoder output> + &query= + <query dencoder output>.

https://meyerweb.com/eric/tools/dencoder/

[tizmagik]

Consider using lz-string which can significantly reduce the size of some large queries when encoding:

import lzString from 'lz-string';

const encoded = lzString.compressToEncodedURIComponent(query);

[ElijahLynn]

Consider using lz-string which can significantly reduce the size of some large queries when encoding:

import lzString from 'lz-string';

const encoded = lzString.compressToEncodedURIComponent(query);

Thanks for that tip, will try soon!

[j-oshb]

I want to use permalinks, but it's not working in my project.

I'm using version graphiql 0.17.5, and starting it with:

import React from 'react'
import GraphiQL from 'graphiql'
import { parse } from 'graphql'

import { execute } from 'apollo-link'
import { getWsLinkStatic } from 'ui-auth'

import 'graphiql/graphiql.css'

export default () => <GraphiQL
  fetcher={opr => execute(
    getWsLinkStatic(),
    {
      ...opr,
      query: parse(opr.query),
    },
  )}
/>

Can anyone point out anything obvious I'm doing wrong?

I'm testing it by populating the query string in the same way described by @ElijahLynn and as used in the Pokemon API example.

[acao]

hello @j-oshb ! currently there are no built-in permalinks of any kind.

some of our examples have some demo code that parses query parameters though. you can see packages/graphiql/resources/renderExample.js for that. it shows how to handle query as a qp and pass it to your fetcher.

we will probably make this available via the core soon, somehow

[j-oshb]

Thanks @acao, I see how to do this now 👍

[ncthbrt]

Related (but focused more on the format of the uri itself and less the ui specifics):
https://github.com/graphql/graphiql/issues/1484