-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: Fix NextJS and Gatsby sections on using a GraphQL IDE (#1445)
* fix: NextJS and Gatsby getting started steps that were swapped 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. * fix: A GraphiQL mention instead of GraphQL Playground But are GraphQL IDEs, but different ones at that. * fix: NextJS GraphQL API endpont at port 3000 (8000 is Gatsby's) * chore: Generalize "GraphQL IDE" instead of singling out just GraphiQL GraphiQL is just for Gatsby so it doesn't make sense to single it out. * Revert "chore: Generalize "GraphQL IDE" instead of singling out just GraphiQL" This reverts commit ade518b. Let's keep this change simple! * Changing article title * Changing links * Update explore-the-faststore-api.mdx * Update explore-the-faststore-api.mdx * Update explore-the-faststore-api.mdx Co-authored-by: PedroAntunesCosta <47991446+PedroAntunesCosta@users.noreply.github.com>
- Loading branch information
1 parent
4e31837
commit 5cc642c
Showing
5 changed files
with
129 additions
and
162 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
95 changes: 95 additions & 0 deletions
95
apps/docs/docs/how-to-guides/faststore-api/explore-the-faststore-api.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| --- | ||
| sidebar_position: 1 | ||
| --- | ||
|
|
||
| import Tabs from '@theme/Tabs' | ||
| import TabItem from '@theme/TabItem' | ||
|
|
||
| # Using a GraphQL IDE to explore the FastStore API | ||
|
|
||
| You can use [GraphQL](https://graphql.org/) Integrated Development Environments (IDEs) to try out queries and mutations. This means you can explore your store's GraphQL data layer by running a local server of your project. | ||
|
|
||
| There are different GraphQL IDEs you can use. In this tutorial, you will learn how to use [graphql-playground](https://github.com/graphql/graphql-playground), but feel free to use another one. It is likely that other IDEs also contain most features described below. | ||
|
|
||
| ## Getting started | ||
|
|
||
| To use a GraphQL playground, you must run your project in a local server and use the local GraphQL path in your GraphQL IDE of choice. Follow the steps below: | ||
|
|
||
| 1. Clone the [graphql-playground repository](https://github.com/graphql/graphql-playground). | ||
| 2. Open the terminal and change to the `graphql-playground` root directory. | ||
| 3. Install dependencies by running the command `yarn`. | ||
| 4. Change the directory to the `packages/graphql-playground-react` folder. | ||
| 5. Run the command `yarn` to install dependencies. | ||
| 6. Run the command `yarn start` to start running `graphql-playground`. Once it is running, it will open a new browser tab with the `graphql-playground` interface on `http://localhost:3000/v2/new`. | ||
|  | ||
| 7. Change the directory to the root of your FastStore project. | ||
| 8. Run the command `yarn develop`. | ||
| 9. Enter your local GraphQL path in the endpoint URL field. | ||
|
|
||
| It is probably `http://localhost:3000/api/graphql` if you are running a [nextjs.store](https://github.com/vtex-sites/nextjs.store) based project and `http://localhost:8000/api/graphql` if your store is based on the [gatsby.store](https://github.com/vtex-sites/gatsby.store). | ||
|
|
||
| 10. Click `USE ENDPOINT`. | ||
|  | ||
|
|
||
| ## Building queries | ||
|
|
||
| You can use the text box on the left side to type queries and mutations. When you are done, click the <img alt="Execute query" className="inline w-6" src="https://vtexhelp.vtexassets.com/assets/docs/src/executeQuery___7272503777684ec305975f94ff9f3698.png"/> **Execute Query** button or press `Ctrl + Enter` to submit your request. | ||
|
|
||
| :::info | ||
| If you are not sure what arguments or fields are allowed or required by some query, press `Ctrl + space` to use autocomplete. It will show you all the available options. | ||
| ::: | ||
|
|
||
| ## Passing arguments | ||
|
|
||
| You can click `QUERY VARIABLES` at the bottom of the screen to open another text box where you can organize the query variables in JSON format. | ||
|
|
||
| Setting the **Query Variables** section is recommended when a query has multiple arguments. Inside the query/mutation parentheses, define the names and types of the variables. Note that the variable names must be preceded by a dollar sign (`$`). | ||
|
|
||
| In the following example, `MyFirstQuery` accepts two variables: `$first` of type `Int` and `$after` of type `String`. The exclamation mark after the type indicates that the corresponding variable is required. | ||
|
|
||
| Create a JSON object on the Query Variables pane with your variable names and values as key-value pairs. | ||
|
|
||
| See this code example: | ||
|
|
||
| <Tabs> | ||
|
|
||
| <TabItem value="query" label="Query" default> | ||
|
|
||
| ```graphql | ||
| query `MyFirstQuery`($first: Int!, $after: String) { | ||
| allProducts(first: $first, after: $after) { | ||
| edges { | ||
| node { | ||
| name | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| </TabItem> | ||
|
|
||
| <TabItem value="variables" label="Variables" default> | ||
|
|
||
| ```json | ||
| { | ||
| "first": 5, | ||
| "after": "10" | ||
| } | ||
| ``` | ||
|
|
||
| </TabItem> | ||
|
|
||
| </Tabs> | ||
|
|
||
| ## Consulting documentation | ||
|
|
||
| You can also learn more about the types and fields available by opening up the `DOCS` tab in the upper right corner. There you can search or browse through FastStore API queries, mutations and types in order to read the corresponding descriptions. | ||
|
|
||
| :::caution | ||
| VTEX is continuously working to ensure that the FastStore API types and fields are documented and available via GraphQL IDEs. However, other APIs and frameworks (e.g., Gatsby, Next.js) may not necessarily be documented this way. | ||
| ::: | ||
|
|
||
| ## Checking your query history | ||
|
|
||
| The **History** panel provides a list of all previously executed queries. Click the query summary presented on the **History** panel to view it in the editor. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
5cc642cThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
faststore – ./
faststore-faststore.vercel.app
faststore-git-main-faststore.vercel.app
www.faststore.dev
faststore-docs.vercel.app
faststore.dev