This document provides an introduction to using GraphQL APIs for Fynd Commerce. GraphQL provides a flexible and efficient approach to interacting with our platform, enabling you to query and manipulate data in a more efficient manner.
GraphQL is a query language for APIs and a runtime for executing those queries by using a type system you define for your data. It allows clients to request the exact data they need, making it more efficient than traditional REST APIs. With GraphQL, you can:
- Retrieve multiple resources in a single request.
- Get predictable results with strongly typed schemas.
- Easily evolve your API without breaking existing queries.
- Single Endpoint: Unlike REST APIs, which have multiple endpoints, GraphQL APIs have a single endpoint that you query for various data needs.
- Efficient Data Fetching: Request only the data you need, minimizing the amount of data transferred over the network.
- Strongly Typed Schema: GraphQL API is built with a strongly typed schema, providing clear and comprehensive documentation and enables advanced tooling and validation.
- Explorer: The GraphQL Explorer provides a feature to play around with theGraphQL API.
Prerequisites
Before you start using the GraphQL API, ensure you have:
- A Fynd Commerce account with the necessary API access permissions.
- Access to an application/sales channel on Fynd Commerce
Accessing the API
The GraphQL API is accessible at the following endpoint:
1https://api.fynd.com/service/application/graphql
To interact with our GraphQL application APIs, you'll need a valid Application ID and token. You can find these credentials from your Fynd Commerce panel. This section will help you to create a base64-encoded token and learn to make API calls with GraphQL APIs.
Prerequisites
- Ensure that you have registered on the Fynd Commerce and have access to any sales channel in the company.
Retrieve application credentials
You can obtain your application ID token from the Fynd Commerce panel. Follow the steps outlined below to retrieve the credentials for your company:
- Log in to your Fynd Commerce account.
- If you have access to multiple companies, you will get the option to select a company.
- Select the company from the company list and it will open the Fynd Commerce page.
- In the sidebar, navigate to Company → Settings → Developers tab and click Application Token tab.
- Collect the application ID and application token for later use.
To make authenticated requests to Fynd’s storefront APIs, you need to generate a base64-encoded token using the application ID and token and pass the authorization header in the request.
- Pass the collected application ID and token and run the following command to generate the base64-encoded token:1base64TokenString=$(echo -n {application_id}:{application_token} | base64)
- Run the following command to view the base64TokenString and save it for later use:1echo $base64TokenString
Example
1curl --request POST \2 --header 'content-type: application/json' \3 --header 'Authorization: Bearer {base64TokenString}' \4 --url 'https://api.fynd.com/service/application/graphql' \5 --data '{"query": "query AppConfig { applicationConfiguration { appDetails { id token } } }" }'
Apollo Client
JavaScript/TypeScript
A comprehensive and flexible GraphQL client for JavaScript, TypeScript, React, and many other frameworks.
Relay
JavaScript/TypeScript
A JavaScript framework for building data-driven React applications with GraphQL, developed by Facebook.
gql
Python
A GraphQL client for Python with support for queries, mutations, and subscriptions.
GraphQL Java
Java
A Java implementation of GraphQL, primarily for building GraphQL servers, but it can be used as a client.
Apollo iOS
Swift (iOS)
A strongly-typed, caching GraphQL client for iOS, based on Apollo.
Apollo Kotlin
Kotlin
A strongly-typed, caching GraphQL client for Kotlin multiplatform, based on Apollo.
The GraphQL Explorer is a powerful, interactive tool that allows developers and users to explore, test, and query a GraphQL API easily. It provides a user-friendly interface to interact with the GraphQL schema, construct queries and mutations, and view real-time results. This documentation will guide you through the main features and usage of the GraphQL Explorer.
Key Features of GraphQL Explorer
- Interactive Query Building: Easily construct GraphQL queries and mutations using the intuitive point-and-click interface.
- Schema Exploration: Browse the complete GraphQL schema, including types, fields, and documentation, directly within the explorer.
- Real-Time Results Execute queries and mutations and view the results instantly within the explorer.
- Autocomplete: Benefit from intelligent autocompletion while writing queries and mutations, reducing errors and speeding up development.
- History: Access and reuse previous queries and mutations using the built-in history feature.
How to Use the GraphQL Explorer
- Accessing the Explorer:
- Open the GraphQL Explorer using the following link:
- Exploring the Schema:
- Browse through the available types, queries, mutations, and subscriptions.
- Click on any type or field to view detailed documentation.
- Constructing Queries:
- In the main editor window, start typing your query or mutation.
- Use the autocomplete feature to help build your query faster.
- Alternatively, use the point-and-click interface to construct queries by selecting fields from the schema explorer.
- Executing Queries:
- Once your query or mutation is ready, click Run (usually represented by a play icon) to execute it.
- View the results in the results pane below the editor.
- Using Variables:
- Define variables in the Query Variables pane below the main editor.
- Reference these variables in your query or mutation to make your requests more dynamic.
- Reviewing History:
- Click History to access the history of your queries and mutations.
- Reuse or modify previous requests as needed.
Example Query
Here is an example of a simple GraphQL query to fetch a list of products:
1query Products {2 products {3 items {4 color5 item_code6 item_type7 has_variant8 uid9 attributes10 country_of_origin11 department12 description13 name14 rating15 rating_count16 slug17 tags18 type19 }20 }21}
To run this query:
- Copy the query and paste it into the main editor window.
- Add application_id and token. (cookie is needed in cases where user information is associated).
- Click Run to execute the query.
- View the list of products in the results pane.
Making Your First Query
Here's an example of a simple GraphQL query to fetch products using curl:
1curl --request POST \2 --header 'content-type: application/json' \3 --header 'Authorization: Bearer <base64 encoded application_id:token>' \4 --url 'https://api.fynd.com/service/application/graphql' \5 --data '{"query": "query Products { products { items {6 color item_code item_type has_variant uid attributes country_of_origin7 department description name rating rating_count slug tags type } } }"}'