Handle the response and the data

Author: Kevnz

src/__tests__/use-post.test.js

@@ -25,7 +25,7 @@ test('should make a POST', async () => {
 
   await waitForNextUpdate()
 
-  expect(result.current.data).toBe('12345')
+  expect(result.current.data).toBe(12345)
 })
 
 test('should make handle error', async () => {

src/__tests__/use-request.test.js

@@ -22,7 +22,7 @@ test('should make a request', async () => {
 
   await waitForNextUpdate()
 
-  expect(result.current.data).toBe('12345')
+  expect(result.current.data).toBe(12345)
 })
 
 test('should make handle error', async () => {

src/reducer.js

@@ -1,8 +1,12 @@
 export const getData = obj => {
-  if (obj && obj.data && obj.data.data) return obj.data.data
-  if (obj && obj.data) return obj.data
-  if (obj.data === null) return null
-  return obj
+  const data = obj && typeof obj.data === 'string' ? JSON.parse(obj.data) : obj
+
+  if (data && data.data) {
+    return data.data
+  } else if (Array.isArray(data)) {
+    return data
+  }
+  return data
 }
 export const getError = obj => {
   if (obj && obj.error && obj.error.Error) return obj.error.Error
@@ -21,15 +25,15 @@ export const reducer = (state, action) => {
     case 'success':
       return {
         ...state,
-        data: action.payload.data,
+        data: getData(action.payload),
         error: null,
         loading: false,
         complete: true,
       }
     case 'error':
       return {
         ...state,
-        data: getData(action.payload),
+        data: getData(action.payload.data),
         error: true,
         errorDetails: getError(action.payload),
         loading: false,

src/use-graphql.js

@@ -87,7 +87,7 @@ export const useQuery = (
     method: 'POST',
   }
 ) => {
-  const { data, error, loading, makeRequest } = useRequest(url, {
+  const { makeRequest, ...props } = useRequest(url, {
     data: null,
     error: null,
     loading: false,
@@ -106,5 +106,5 @@ export const useQuery = (
     })
   }
 
-  return { data, error, loading, makeQuery }
+  return { makeQuery, ...props }
 }

src/use-request.js

@@ -69,6 +69,7 @@ const useRequest = (url = '', config = { method: 'GET' }) => {
           payload: result,
         })
       }
+
       return dispatch({ type: 'success', payload: { data: result } })
     }
     const result = await resp.text()

working/hooks/graph.js

@@ -25,6 +25,7 @@ export default () => {
   useEffect(() => {
     makeQuery()
   }, [])
+  console.log('data', data)
   if (loading) {
     return (
       <div className="App">

working/hooks/grapher.js

@@ -23,10 +23,11 @@ export default () => {
     }`,
     { id: 1 }
   )
-
+  console.log('data', data)
   if (data.length === 0 && !loading) {
     makeQuery({ id: 1 })
   }
+
   if (loading) {
     return (
       <div className="App">
@@ -48,7 +49,7 @@ export default () => {
   }
   return (
     <div className="App content">
-      <h2>{data.person[0].name} - er</h2>
+      <h2>{data.person[0].name}</h2>
       <h3>Pick a number</h3>
       <div className="field is-grouped">
         <p className="control">