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

docs: Fix NextJS and Gatsby sections on using a GraphQL IDE #1445

Merged
merged 10 commits into from
Aug 29, 2022

Conversation

filipewl
Copy link
Contributor

@filipewl filipewl commented Aug 26, 2022

What's the purpose of this pull request?

The section names were inverted. Only Gatsby provides GraphiQL to explore the API via http://localhost:8000/__graphql. Our NextJS starter doesn't provide something similar, so the section about using GraphQL Playground is more suitable for it.

I also suggested renaming the title to "GraphQL IDEs" instead of just "GraphiQL" because the latter is only used in Gatsby.

@vtex/tech-writers feel free to revert/undo/add changes!

Before After
Link Link

References

Only Gatsby provides GraphiQL to explore the API via http://localhost:8000/__graphql. Our NextJS starter doesn't provide something similar, so the section about the using GraphQL Playground is more suitable to it. The section names were inverted.
@filipewl filipewl added the documentation Improvements or additions to documentation label Aug 26, 2022
@filipewl filipewl requested a review from a team August 26, 2022 16:49
@filipewl filipewl self-assigned this Aug 26, 2022
@vercel
Copy link

vercel bot commented Aug 26, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
faststore ✅ Ready (Inspect) Visit Preview Aug 26, 2022 at 9:35PM (UTC)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 26, 2022

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 6b17ce5:

Sandbox Source
Store UI Typescript Configuration

GraphiQL is just for Gatsby so it doesn't make sense to single it out.
@filipewl filipewl marked this pull request as ready for review August 26, 2022 17:30
@filipewl filipewl requested a review from a team as a code owner August 26, 2022 17:30
Comment on lines 8 to 16
# Using GraphiQL to explore the FastStore API
# Using a GraphQL IDE to explore the FastStore API

[GraphiQL](https://github.com/graphql/graphiql) is an Integrated Development Environment (IDE) for [GraphQL](https://graphql.org/). You can run GraphiQL on your browser to try out queries and mutations in a GraphQL API.
[GraphiQL](https://github.com/graphql/graphiql) and [GraphQL Playground](https://github.com/graphql/graphql-playground) are an Integrated Development Environment (IDE) for [GraphQL](https://graphql.org/). You can run them on your browser to try out queries and mutations in a GraphQL API.

You can explore your store's GraphQL data layer by running a local server of your project.

## Getting started

The first steps to getting GraphiQL up and running are different depending on the framework you are using on your project:
The first steps to getting them up and running are different depending on the framework you are using on your project:
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Here's more of a suggestion of being more general using "GraphQL IDE" instead of "GraphiQL" because the latter is only used in Gatsby.

Not sure how to best extend this title modification across other pages and references. Is it safe to rename the file and all other occurrences?

CleanShot 2022-08-26 at 14 17 25@2x

Copy link
Contributor

Choose a reason for hiding this comment

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

I believe it is safe to rename the file and corresponding slugs across other docs.

It would be great if we could also create a URL redirect, in case users have saved the old URL somewhere, but I think we do not have this ability for this portal yet. Do we, @carolinamenezes ?

Follow these steps to run a local server and access GraphiQL:
Follow these steps to run a local server and access GraphQL Playground:
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Note they're different apps that help explore a GraphQL API.

@@ -5,19 +5,19 @@ sidebar_position: 1
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Using GraphiQL to explore the FastStore API
# Using a GraphQL IDE to explore the FastStore API
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The rest of the documentation from "Building queries" explains how to use GraphiQL, so maybe it makes sense to keep the original title? Although it focuses on GraphiQL, with GraphQL Playground it should be pretty similar.

@PedroAntunesCosta
Copy link
Contributor

Thanks a lot for the suggestions @filipewl ! But I think I'll have to make more changes. I hope to have a new version by the end of next week.

GraphiQL stopped working with Gatsby last month, which was what made me rewrite this guide to add separate instructions for next.js and Gatsby in the first place. And I tested it now and could not run a simple query.
image

I think this means this tutorial should be more agnostic as to what playground is used and maybe indicate 2-3 alternatives.

Or maybe I am doing something wrong in my tests.

…GraphiQL"

This reverts commit ade518b.

Let's keep this change simple!
@PedroAntunesCosta
Copy link
Contributor

I adjusted the tutorial to be more generic,, @filipewl

Copy link
Contributor Author

@filipewl filipewl left a comment

Choose a reason for hiding this comment

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

Perfect @PedroAntunesCosta! Thanks a lot.

Copy link
Member

@eduardoformiga eduardoformiga left a comment

Choose a reason for hiding this comment

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

LGTM!

@PedroAntunesCosta PedroAntunesCosta merged commit 5cc642c into main Aug 29, 2022
@PedroAntunesCosta PedroAntunesCosta deleted the docs/graphql-ide branch August 29, 2022 13:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants