From 7f0303776b48dc4a39c5ea2418123bdbd9851dcc Mon Sep 17 00:00:00 2001
From: Sunil <84917190+sunil-sharma-999@users.noreply.github.com>
Date: Tue, 11 Jun 2024 10:43:34 +0530
Subject: [PATCH 1/2] fix(example): index.jsx

Fix Bad argument type for Post query by converting args into Object form.
---
 .../react/basic-graphql-request/src/index.jsx | 59 +++++++++----------
 1 file changed, 28 insertions(+), 31 deletions(-)

diff --git a/examples/react/basic-graphql-request/src/index.jsx b/examples/react/basic-graphql-request/src/index.jsx
index b484d73a23..f7754a37c8 100644
--- a/examples/react/basic-graphql-request/src/index.jsx
+++ b/examples/react/basic-graphql-request/src/index.jsx
@@ -1,21 +1,21 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import React from 'react'
-import ReactDOM from 'react-dom/client'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 import {
   useQuery,
   useQueryClient,
   QueryClient,
   QueryClientProvider,
-} from '@tanstack/react-query'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { request, gql } from 'graphql-request'
+} from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { request, gql } from 'graphql-request';
 
-const endpoint = 'https://graphqlzero.almansi.me/api'
+const endpoint = 'https://graphqlzero.almansi.me/api';
 
-const queryClient = new QueryClient()
+const queryClient = new QueryClient();
 
 function App() {
-  const [postId, setPostId] = React.useState(-1)
+  const [postId, setPostId] = React.useState(-1);
 
   return (
     <QueryClientProvider client={queryClient}>
@@ -36,7 +36,7 @@ function App() {
       )}
       <ReactQueryDevtools initialIsOpen />
     </QueryClientProvider>
-  )
+  );
 }
 
 function usePosts() {
@@ -56,16 +56,16 @@ function usePosts() {
               }
             }
           }
-        `,
-      )
-      return data
+        `
+      );
+      return data;
     },
-  })
+  });
 }
 
 function Posts({ setPostId }) {
-  const queryClient = useQueryClient()
-  const { status, data, error, isFetching } = usePosts()
+  const queryClient = useQueryClient();
+  const { status, data, error, isFetching } = usePosts();
 
   return (
     <div>
@@ -104,13 +104,13 @@ function Posts({ setPostId }) {
         )}
       </div>
     </div>
-  )
+  );
 }
 
 function usePost(postId) {
-  return useQuery(
-    ['post', postId],
-    async () => {
+  return useQuery({
+    queryKey: ['post', postId],
+    queryFn: async () => {
       const { post } = await request(
         endpoint,
         gql`
@@ -121,19 +121,16 @@ function usePost(postId) {
             body
           }
         }
-        `,
-      )
-
-      return post
-    },
-    {
-      enabled: !!postId,
+        `
+      );
+      return post;
     },
-  )
+    enabled: postId > -1,
+  });
 }
 
 function Post({ postId, setPostId }) {
-  const { status, data, error, isFetching } = usePost(postId)
+  const { status, data, error, isFetching } = usePost(postId);
 
   return (
     <div>
@@ -156,8 +153,8 @@ function Post({ postId, setPostId }) {
         </>
       )}
     </div>
-  )
+  );
 }
 
-const rootElement = document.getElementById('root')
-ReactDOM.createRoot(rootElement).render(<App />)
+const rootElement = document.getElementById('root');
+ReactDOM.createRoot(rootElement).render(<App />);

From d703819f3174f15a3d02fe024320d7c2d4f86365 Mon Sep 17 00:00:00 2001
From: Sunil <84917190+sunil-sharma-999@users.noreply.github.com>
Date: Wed, 12 Jun 2024 14:35:52 +0530
Subject: [PATCH 2/2] update:
 examples/react/basic-graphql-request/src/index.jsx

Remove semicolons
---
 .../react/basic-graphql-request/src/index.jsx | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/examples/react/basic-graphql-request/src/index.jsx b/examples/react/basic-graphql-request/src/index.jsx
index f7754a37c8..294efe3e68 100644
--- a/examples/react/basic-graphql-request/src/index.jsx
+++ b/examples/react/basic-graphql-request/src/index.jsx
@@ -1,21 +1,21 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import React from 'react'
+import ReactDOM from 'react-dom/client'
 import {
   useQuery,
   useQueryClient,
   QueryClient,
   QueryClientProvider,
-} from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { request, gql } from 'graphql-request';
+} from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { request, gql } from 'graphql-request'
 
-const endpoint = 'https://graphqlzero.almansi.me/api';
+const endpoint = 'https://graphqlzero.almansi.me/api'
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient()
 
 function App() {
-  const [postId, setPostId] = React.useState(-1);
+  const [postId, setPostId] = React.useState(-1)
 
   return (
     <QueryClientProvider client={queryClient}>
@@ -36,7 +36,7 @@ function App() {
       )}
       <ReactQueryDevtools initialIsOpen />
     </QueryClientProvider>
-  );
+  )
 }
 
 function usePosts() {
@@ -57,15 +57,15 @@ function usePosts() {
             }
           }
         `
-      );
-      return data;
+      )
+      return data
     },
-  });
+  })
 }
 
 function Posts({ setPostId }) {
-  const queryClient = useQueryClient();
-  const { status, data, error, isFetching } = usePosts();
+  const queryClient = useQueryClient()
+  const { status, data, error, isFetching } = usePosts()
 
   return (
     <div>
@@ -104,7 +104,7 @@ function Posts({ setPostId }) {
         )}
       </div>
     </div>
-  );
+  )
 }
 
 function usePost(postId) {
@@ -122,15 +122,15 @@ function usePost(postId) {
           }
         }
         `
-      );
-      return post;
+      )
+      return post
     },
     enabled: postId > -1,
-  });
+  })
 }
 
 function Post({ postId, setPostId }) {
-  const { status, data, error, isFetching } = usePost(postId);
+  const { status, data, error, isFetching } = usePost(postId)
 
   return (
     <div>
@@ -153,8 +153,8 @@ function Post({ postId, setPostId }) {
         </>
       )}
     </div>
-  );
+  )
 }
 
-const rootElement = document.getElementById('root');
-ReactDOM.createRoot(rootElement).render(<App />);
+const rootElement = document.getElementById('root')
+ReactDOM.createRoot(rootElement).render(<App />)