fix(example): index.jsx

Fix Bad argument type for Post query by converting args into Object form.

Author: sunil-sharma-999

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 />);