Gatsby Question - GraphQL Playground

Can I ask a Gatsby question here? If not, if possible, please suggest another location but not Stack Overflow.

In case the answer is yes, here is the question: By default Gatsby uses Queryql. There is another, newer query program called Queryql-playground. Is it possible to make Playground the default? Thanks.

I suggest going to the very active discord server. The Gatsby community is as awesome as the Netlify community.

https://gatsby.dev/discord

Hi @Engine44,

I’m not sure if you mean GraphQL, but if that’s the case there’s an article in the Gatsby documentation on how to use GraphQL playground as default for development: https://www.gatsbyjs.org/docs/using-graphql-playground/

Thanks. Perhaps I’m wrong but I interpret that article as a method of using Playground in a specific project as opposed to having Playground builtin to Gatsby as the default.

Well, Gatsby uses GraphiQL (https://github.com/graphql/graphiql) as it’s default in-browser IDE for exploring GraphQL. Because of that you have to override that behaviour with the environment variable like the article explains. But if you always want to use graphql playground you could just add the env variable to your .bashrc or .zshrc (depending on your shell):

export GATSBY_GRAPHQL_IDE=playground

I use the bash shell on Mac. Would I simply open the Mac terminal and type: export GATSBY_GRAPHQL_IDE=playground

I don’t have to be in any special directory?

Thanks

You could just run export GATSBY_GRAPHQL_IDE=playground in the terminal, but then you’d have to run it again each time you close your terminal session.

Add it to your .bashrc file in your home directory. If the file doesn’t exist, create it.

Or, run echo 'export GATSBY_GRAPHQL_IDE=playground' >> ~/.bashrc which will directly append it to the .bashrc file.

Make sure to close your terminal and/or open a new one once thats done to reinitialize the environment variables.

After running that command and after restarting the terminal, I ran “cat .bashrc”. It returned “export GATSBY_GRAPHQL_IDE=playground”. Is that ok? Thanks.

Yeah, that should do the trick. You can test it by running echo $GATSBY_GRAPHQL_IDE which should return playground.

If you start the Gatsby development task you should see following message:

I ran “echo $GATSBY_GRAPHQL_IDE”. It returned nothing.

Ah, you mentioned you’re working on a mac, right? Apparently the Bash shell doesn’t read the .bashrc file on macs. Alternatively you can put the export statement in the ~/.profile file:

echo 'export GATSBY_GRAPHQL_IDE=playground' >> ~/.profile, restart the terminal and run echo $GATSBY_GRAPHQL_IDE.

hi there, you are welcome to ask gatsby questions over here with the knowledge that our staff members are unlikely to be able to provide in-depth support. Also, please file them in the #topics:cms-ssg category and give them descriptive titles as to what you are trying to accomplish or what doesn’t work. This is important so other users can find the threads and work isn’t duplicated :slight_smile:

Hi, As I mentioned above, when I ran cat “.bashrc”, it returned “export GATSBY_GRAPHQL_IDE=playground”. Doesn’t that mean bash accepted the command and placed the request in the .bashrc file as it should? Before I put “export GATSBY_GRAPHQL_IDE=playground” in the .profile file, should I remove it from the .bashrc file? Thanks.

I just did a search for the .bashrc file and found it. It was just created today and only contains the code you specified. Can I just delete the file or should I try to clear it?

I cleared the .bashrc file and ran the command in the.profile file. When I echoed it I got: “-bash: export: `GATSBY_GRAPHQL_IDE=playground’: not a valid identifier”

“export GATSBY_GRAPHQL_IDE=playground” is in the .profile file.

I ran a Gatsby project and Graphiql came up in localhost. I guess we’re not there yet, lol.

If I can’t get the env variable to work, I have another idea. I will be creating a Gatsby template project. In that I can set “playground”.

Making some progress: Ran echo ‘export GATSBY_GRAPHQL_IDE=“playground”’ >> ~/.bash_profile. It was accepted without error and echo $GATSBY_GRAPHQL_IDE returned playground. But there was no change within the Gatsby program.

Thank you. I found a Gatsby site for future questions.

Hi @Engine44,

sorry for the misleading info before regarding .profile, etc. As I’m not using the bash shell things are a bit different for my environment. But I just tried it out with bash and it seems to work for me. The thing is though to make sure that you don’t have playground in quotes:

Edit your .bash_profile file and remove all the quotes around playground. Your file should look like this:

export GATSBY_GRAPHQL_IDE=playground

As I said in my last re-ploy:

Making some progress: Ran echo ‘export GATSBY_GRAPHQL_IDE=“playground”’ >> ~/.bash_profile. It was accepted without error and echo $GATSBY_GRAPHQL_IDE returned playground. But there was no change within the Gatsby program.

The quotes idea came from someone on the Apple forum and it did help some.

I just ran echo ‘export GATSBY_GRAPHQL_IDE=playground’ >> ~/.bash_profile and it did not create any errors but after restart echo did not return playground. With the quotes, playground was returned. But either way Gatsby was not changed.

In that case I’m affraid I can’t help you, sorry. Usually it’s enough to export those environment variables in the bash’s profile files and have Gatsby pick them up during the build-process. But without knowing your setup and limited knowledge of bash quirks it’s hard to figure out whats exaclty going wrong :frowning:

Thanks for your help. I’ll make the change to playground inside a project. I think I can set up a reusable theme and will only have to do it once. That’s good. Looking forward to it all but still need to learn a lot more, lol.

2 Likes

keep this thread updated if you want to - this is definitely good information for new users!

Ok, thanks…