From 25fbc4309b94ffb4875ac168a3cb72c187c593cd Mon Sep 17 00:00:00 2001
From: Amaan Khan <amaanpathan5@gmail.com>
Date: Wed, 19 Feb 2025 19:31:45 +0530
Subject: [PATCH 1/2] feat: add doc for mutating and quering data using GraphQL

---
 docs/mutating-data.md | 63 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 docs/mutating-data.md

diff --git a/docs/mutating-data.md b/docs/mutating-data.md
new file mode 100644
index 00000000..d0c495e2
--- /dev/null
+++ b/docs/mutating-data.md
@@ -0,0 +1,63 @@
+# Mutating GraphQL Query
+
+SnapWP enables the modification and execution of queries through various methods, which can be helpful for retrieving custom data via GraphQL. This document outlines the distinct methods offered by SnapWP for fetching data using GraphQL queries.
+
+## Using @snapwp/query package
+
+@todo: Add example once the function to mutate queries is added to `@snapwp/query` package.
+
+## Using Codegen
+
+@todo: Add example once queries are mutable via codegen.
+
+## Using Apollo Client
+
+To retrieve global styles from the WordPress backend, a GraphQL query can be executed using an Apollo client by:
+
+### 1. Creating a query file
+
+Create a query file in the `src` folder.
+
+```graphql
+query GetGlobalStyles {
+	globalStyles {
+		customCss
+		stylesheet
+		renderedFontFaces
+	}
+}
+```
+
+### 2. Generate Codegen Documents
+
+Run `npm run codegen` inside the SnapWP application to generate codegen documents.
+
+### 3. Initialize Apollo client
+
+Create a new instance of an Apollo client using `ApolloClient` class available in `@apollo/client` package. 
+
+> [!TIP]
+> Refer [config-api.md](./config-api.md) for more information on NEXT_PUBLIC_WORDPRESS_URL and NEXT_PUBLIC_GRAPHQL_ENDPOINT.
+
+```typescript
+import { ApolloClient } from '@apollo/client';
+
+const apolloClient = new ApolloClient( {
+	uri: 'https://{NEXT_PUBLIC_WORDPRESS_URL}/{NEXT_PUBLIC_GRAPHQL_ENDPOINT}', // Specifies the URL of our GraphQL server.
+} );
+```
+
+### 4. Fetching data
+
+> [!TIP]
+> Refer AppoloClient's [official doc](https://www.apollographql.com/docs/react/api/core/ApolloClient#query) for query function definition. For function parameters refer [QueryOptions](https://github.com/apollographql/apollo-client/blob/356fcc9414286988d884e26dffafaf4d317d1b2d/src/core/watchQueryOptions.ts#L56-L86) interface.
+
+Data can be fetched by firing `query` function provided by the Apollo client instance.
+
+```typescript
+import { GetGlobalStylesDocument } from './__generated/graphql'; // Import generated codegen query document. 
+
+const data = await apolloClient.query( {
+	query: GetGlobalStylesDocument
+} );
+```

From 2f7566af302f021100ec61f950638913c4003e96 Mon Sep 17 00:00:00 2001
From: Amaan Khan <amaanpathan5@gmail.com>
Date: Wed, 19 Feb 2025 19:35:44 +0530
Subject: [PATCH 2/2] refactor: format mutating query doc

---
 docs/mutating-data.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/mutating-data.md b/docs/mutating-data.md
index d0c495e2..fc992723 100644
--- a/docs/mutating-data.md
+++ b/docs/mutating-data.md
@@ -34,7 +34,7 @@ Run `npm run codegen` inside the SnapWP application to generate codegen document
 
 ### 3. Initialize Apollo client
 
-Create a new instance of an Apollo client using `ApolloClient` class available in `@apollo/client` package. 
+Create a new instance of an Apollo client using `ApolloClient` class available in `@apollo/client` package.
 
 > [!TIP]
 > Refer [config-api.md](./config-api.md) for more information on NEXT_PUBLIC_WORDPRESS_URL and NEXT_PUBLIC_GRAPHQL_ENDPOINT.
@@ -55,9 +55,9 @@ const apolloClient = new ApolloClient( {
 Data can be fetched by firing `query` function provided by the Apollo client instance.
 
 ```typescript
-import { GetGlobalStylesDocument } from './__generated/graphql'; // Import generated codegen query document. 
+import { GetGlobalStylesDocument } from './__generated/graphql'; // Import generated codegen query document.
 
 const data = await apolloClient.query( {
-	query: GetGlobalStylesDocument
+	query: GetGlobalStylesDocument,
 } );
 ```