graphql-hooks - npm Package Compare versions

Comparing version 3.2.4 to 3.2.5

dist/graphql-hooks.js

@@ -280,2 +280,3 @@ (function (global, factory) {
   var client = React.useContext(ClientContext);
+  var isMounted = React.useRef(true);
   var operation = {
@@ -303,12 +304,21 @@ query: query,
   React.useEffect(function () {
-    if (initialOpts.updateData) return; // if using updateData we can assume that the consumer cares about the previous data
-
-    dispatch({
-      type: actionTypes.RESET_STATE,
-      initialState: initialState
-    });
+    if (!initialOpts.updateData) {
+      // if using updateData we can assume that the consumer cares about the previous data
+      dispatch({
+        type: actionTypes.RESET_STATE,
+        initialState: initialState
+      });
+    }
   }, [stringifiedCacheKey]); // eslint-disable-line react-hooks/exhaustive-deps
-  // arguments to fetchData override the useClientRequest arguments
 
+  React.useEffect(function () {
+    isMounted.current = true;
+    return function () {
+      isMounted.current = false;
+    };
+  }, []); // arguments to fetchData override the useClientRequest arguments
+
   function fetchData(newOpts) {
+    if (!isMounted.current) return Promise.resolve();
+
     var revisedOpts = _objectSpread({}, initialOpts, newOpts);
@@ -348,6 +358,9 @@
 
-      dispatch({
-        type: actionTypes.REQUEST_RESULT,
-        result: result
-      });
+      if (isMounted.current) {
+        dispatch({
+          type: actionTypes.REQUEST_RESULT,
+          result: result
+        });
+      }
+
       return result;
@@ -354,0 +367,0 @@ });

dist/graphql-hooks.min.js

@@ -1,1 +0,1 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],r):r((e=e||self).GraphQLHooks={},e.React)}(this,function(e,r){"use strict";function t(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function o(e){for(var r=1;arguments.length>r;r++){var o=null!=arguments[r]?arguments[r]:{},n=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(o).filter(function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable}))),n.forEach(function(r){t(e,r,o[r])})}return e}var n=(r=r&&r.hasOwnProperty("default")?r.default:r).createContext();n.displayName="ClientContext";var a=function(){function e(e){if(void 0===e&&(e={}),!e.url)throw Error("GraphQLClient: config.url is required");if(e.fetch&&"function"!=typeof e.fetch)throw Error("GraphQLClient: config.fetch must be a function");if(!e.fetch&&!fetch)throw Error("GraphQLClient: fetch must be polyfilled or passed in new GraphQLClient({ fetch })");this.cache=e.cache,this.headers=e.headers||{},this.ssrMode=e.ssrMode,this.ssrPromises=[],this.url=e.url,this.fetch=e.fetch||fetch.bind(),this.fetchOptions=e.fetchOptions||{},this.logErrors=void 0===e.logErrors||e.logErrors,this.onError=e.onError}var r=e.prototype;return r.setHeader=function(e,r){return this.headers[e]=r,this},r.setHeaders=function(e){return this.headers=e,this},r.logErrorResult=function(e){var r=e.result,t=e.operation;if(this.onError)return this.onError({result:r,operation:t});console.error("GraphQL Hooks Error"),console.groupCollapsed("---\x3e Full Error Details"),console.groupCollapsed("Operation:"),console.log(t),console.groupEnd(),r.fetchError&&(console.groupCollapsed("FETCH ERROR:"),console.log(r.fetchError),console.groupEnd()),r.httpError&&(console.groupCollapsed("HTTP ERROR:"),console.log(r.httpError),console.groupEnd()),r.graphQLErrors&&r.graphQLErrors.length>0&&(console.groupCollapsed("GRAPHQL ERROR:"),r.graphQLErrors.forEach(function(e){return console.log(e)}),console.groupEnd()),console.groupEnd()},r.generateResult=function(e){var r=e.fetchError,t=e.httpError,o=e.graphQLErrors;return{error:!!(o&&o.length>0||r||t),fetchError:r,httpError:t,graphQLErrors:o,data:e.data}},r.getCacheKey=function(e,r){return void 0===r&&(r={}),{operation:e,fetchOptions:o({},this.fetchOptions,r.fetchOptionsOverrides)}},r.request=function(e,r){var t=this;return void 0===r&&(r={}),this.fetch(this.url,o({method:"POST",headers:o({"Content-Type":"application/json"},this.headers),body:JSON.stringify({query:e.query,variables:e.variables,operationName:e.operationName})},this.fetchOptions,r.fetchOptionsOverrides)).then(function(e){return e.ok?e.json().then(function(e){return t.generateResult({graphQLErrors:e.errors,data:e.data})}):e.text().then(function(r){return t.generateResult({httpError:{status:e.status,statusText:e.statusText,body:r}})})}).catch(function(e){return t.generateResult({fetchError:e})}).then(function(r){return r.error&&t.logErrors&&t.logErrorResult({result:r,operation:e}),r})},e}(),s={RESET_STATE:"RESET_STATE",LOADING:"LOADING",CACHE_HIT:"CACHE_HIT",REQUEST_RESULT:"REQUEST_RESULT"};function i(e,r){switch(r.type){case s.RESET_STATE:return r.initialState;case s.LOADING:return e.loading?e:o({},e,{loading:!0});case s.CACHE_HIT:return e.cacheHit?e:o({},r.result,{cacheHit:!0,loading:!1});case s.REQUEST_RESULT:return o({},r.result,{cacheHit:!1,loading:!1});default:return e}}function u(e,t){void 0===t&&(t={});var a=r.useContext(n),u={query:e,variables:t.variables,operationName:t.operationName},c=a.getCacheKey(u,t),h=t.skipCache||!a.cache?null:a.cache.get(c),l=o({},h,{cacheHit:!!h,loading:!t.isMutation&&!h}),f=r.useReducer(i,l),p=f[0],d=f[1],E=JSON.stringify(c);return r.useEffect(function(){t.updateData||d({type:s.RESET_STATE,initialState:l})},[E]),[function(e){var r=o({},t,e),n=o({},u,{variables:r.variables,operationName:r.operationName}),i=a.getCacheKey(n,r),c=r.skipCache||!a.cache?null:a.cache.get(i);return c?(d({type:s.CACHE_HIT,result:c}),Promise.resolve(c)):(d({type:s.LOADING}),a.request(n,r).then(function(e){if(p.data&&e.data&&r.updateData){if("function"!=typeof r.updateData)throw Error("options.updateData must be a function");e.data=r.updateData(p.data,e.data)}return r.useCache&&a.cache&&a.cache.set(i,e),d({type:s.REQUEST_RESULT,result:e}),e}))},p]}var c={useCache:!0};e.ClientContext=n,e.GraphQLClient=a,e.useClientRequest=u,e.useQuery=function(e,t){void 0===t&&(t={});var a=o({},c,t),s=r.useContext(n),i=r.useState(!1),h=i[0],l=i[1],f=u(e,a),p=f[0],d=f[1];if(s.ssrMode&&!1!==t.ssr&&!h){if(!d.data&&!d.error){var E=p();s.ssrPromises.push(E)}l(!0)}var g=JSON.stringify(a);return r.useEffect(function(){p()},[e,g]),o({},d,{refetch:function(e){return void 0===e&&(e={}),p(o({skipCache:!0,updateData:function(e,r){return r}},e))}})},e.useManualQuery=function(e,r){return u(e,o({useCache:!0},r))},e.useMutation=function(e,r){return u(e,o({isMutation:!0},r))},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],r):r((e=e||self).GraphQLHooks={},e.React)}(this,function(e,r){"use strict";function t(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function o(e){for(var r=1;arguments.length>r;r++){var o=null!=arguments[r]?arguments[r]:{},n=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(o).filter(function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable}))),n.forEach(function(r){t(e,r,o[r])})}return e}var n=(r=r&&r.hasOwnProperty("default")?r.default:r).createContext();n.displayName="ClientContext";var a=function(){function e(e){if(void 0===e&&(e={}),!e.url)throw Error("GraphQLClient: config.url is required");if(e.fetch&&"function"!=typeof e.fetch)throw Error("GraphQLClient: config.fetch must be a function");if(!e.fetch&&!fetch)throw Error("GraphQLClient: fetch must be polyfilled or passed in new GraphQLClient({ fetch })");this.cache=e.cache,this.headers=e.headers||{},this.ssrMode=e.ssrMode,this.ssrPromises=[],this.url=e.url,this.fetch=e.fetch||fetch.bind(),this.fetchOptions=e.fetchOptions||{},this.logErrors=void 0===e.logErrors||e.logErrors,this.onError=e.onError}var r=e.prototype;return r.setHeader=function(e,r){return this.headers[e]=r,this},r.setHeaders=function(e){return this.headers=e,this},r.logErrorResult=function(e){var r=e.result,t=e.operation;if(this.onError)return this.onError({result:r,operation:t});console.error("GraphQL Hooks Error"),console.groupCollapsed("---\x3e Full Error Details"),console.groupCollapsed("Operation:"),console.log(t),console.groupEnd(),r.fetchError&&(console.groupCollapsed("FETCH ERROR:"),console.log(r.fetchError),console.groupEnd()),r.httpError&&(console.groupCollapsed("HTTP ERROR:"),console.log(r.httpError),console.groupEnd()),r.graphQLErrors&&r.graphQLErrors.length>0&&(console.groupCollapsed("GRAPHQL ERROR:"),r.graphQLErrors.forEach(function(e){return console.log(e)}),console.groupEnd()),console.groupEnd()},r.generateResult=function(e){var r=e.fetchError,t=e.httpError,o=e.graphQLErrors;return{error:!!(o&&o.length>0||r||t),fetchError:r,httpError:t,graphQLErrors:o,data:e.data}},r.getCacheKey=function(e,r){return void 0===r&&(r={}),{operation:e,fetchOptions:o({},this.fetchOptions,r.fetchOptionsOverrides)}},r.request=function(e,r){var t=this;return void 0===r&&(r={}),this.fetch(this.url,o({method:"POST",headers:o({"Content-Type":"application/json"},this.headers),body:JSON.stringify({query:e.query,variables:e.variables,operationName:e.operationName})},this.fetchOptions,r.fetchOptionsOverrides)).then(function(e){return e.ok?e.json().then(function(e){return t.generateResult({graphQLErrors:e.errors,data:e.data})}):e.text().then(function(r){return t.generateResult({httpError:{status:e.status,statusText:e.statusText,body:r}})})}).catch(function(e){return t.generateResult({fetchError:e})}).then(function(r){return r.error&&t.logErrors&&t.logErrorResult({result:r,operation:e}),r})},e}(),s={RESET_STATE:"RESET_STATE",LOADING:"LOADING",CACHE_HIT:"CACHE_HIT",REQUEST_RESULT:"REQUEST_RESULT"};function i(e,r){switch(r.type){case s.RESET_STATE:return r.initialState;case s.LOADING:return e.loading?e:o({},e,{loading:!0});case s.CACHE_HIT:return e.cacheHit?e:o({},r.result,{cacheHit:!0,loading:!1});case s.REQUEST_RESULT:return o({},r.result,{cacheHit:!1,loading:!1});default:return e}}function u(e,t){void 0===t&&(t={});var a=r.useContext(n),u=r.useRef(!0),c={query:e,variables:t.variables,operationName:t.operationName},h=a.getCacheKey(c,t),l=t.skipCache||!a.cache?null:a.cache.get(h),f=o({},l,{cacheHit:!!l,loading:!t.isMutation&&!l}),p=r.useReducer(i,f),E=p[0],d=p[1],g=JSON.stringify(h);return r.useEffect(function(){t.updateData||d({type:s.RESET_STATE,initialState:f})},[g]),r.useEffect(function(){return u.current=!0,function(){u.current=!1}},[]),[function(e){if(!u.current)return Promise.resolve();var r=o({},t,e),n=o({},c,{variables:r.variables,operationName:r.operationName}),i=a.getCacheKey(n,r),h=r.skipCache||!a.cache?null:a.cache.get(i);return h?(d({type:s.CACHE_HIT,result:h}),Promise.resolve(h)):(d({type:s.LOADING}),a.request(n,r).then(function(e){if(E.data&&e.data&&r.updateData){if("function"!=typeof r.updateData)throw Error("options.updateData must be a function");e.data=r.updateData(E.data,e.data)}return r.useCache&&a.cache&&a.cache.set(i,e),u.current&&d({type:s.REQUEST_RESULT,result:e}),e}))},E]}var c={useCache:!0};e.ClientContext=n,e.GraphQLClient=a,e.useClientRequest=u,e.useQuery=function(e,t){void 0===t&&(t={});var a=o({},c,t),s=r.useContext(n),i=r.useState(!1),h=i[0],l=i[1],f=u(e,a),p=f[0],E=f[1];if(s.ssrMode&&!1!==t.ssr&&!h){if(!E.data&&!E.error){var d=p();s.ssrPromises.push(d)}l(!0)}var g=JSON.stringify(a);return r.useEffect(function(){p()},[e,g]),o({},E,{refetch:function(e){return void 0===e&&(e={}),p(o({skipCache:!0,updateData:function(e,r){return r}},e))}})},e.useManualQuery=function(e,r){return u(e,o({useCache:!0},r))},e.useMutation=function(e,r){return u(e,o({isMutation:!0},r))},Object.defineProperty(e,"__esModule",{value:!0})});

es/graphql-hooks.js

@@ -274,2 +274,3 @@ import React from 'react';
   var client = React.useContext(ClientContext);
+  var isMounted = React.useRef(true);
   var operation = {
@@ -297,12 +298,21 @@ query: query,
   React.useEffect(function () {
-    if (initialOpts.updateData) return; // if using updateData we can assume that the consumer cares about the previous data
-
-    dispatch({
-      type: actionTypes.RESET_STATE,
-      initialState: initialState
-    });
+    if (!initialOpts.updateData) {
+      // if using updateData we can assume that the consumer cares about the previous data
+      dispatch({
+        type: actionTypes.RESET_STATE,
+        initialState: initialState
+      });
+    }
   }, [stringifiedCacheKey]); // eslint-disable-line react-hooks/exhaustive-deps
-  // arguments to fetchData override the useClientRequest arguments
 
+  React.useEffect(function () {
+    isMounted.current = true;
+    return function () {
+      isMounted.current = false;
+    };
+  }, []); // arguments to fetchData override the useClientRequest arguments
+
   function fetchData(newOpts) {
+    if (!isMounted.current) return Promise.resolve();
+
     var revisedOpts = _objectSpread({}, initialOpts, newOpts);
@@ -342,6 +352,9 @@
 
-      dispatch({
-        type: actionTypes.REQUEST_RESULT,
-        result: result
-      });
+      if (isMounted.current) {
+        dispatch({
+          type: actionTypes.REQUEST_RESULT,
+          result: result
+        });
+      }
+
       return result;
@@ -348,0 +361,0 @@ });

lib/graphql-hooks.js

@@ -280,2 +280,3 @@ 'use strict';
   var client = React.useContext(ClientContext);
+  var isMounted = React.useRef(true);
   var operation = {
@@ -303,12 +304,21 @@ query: query,
   React.useEffect(function () {
-    if (initialOpts.updateData) return; // if using updateData we can assume that the consumer cares about the previous data
-
-    dispatch({
-      type: actionTypes.RESET_STATE,
-      initialState: initialState
-    });
+    if (!initialOpts.updateData) {
+      // if using updateData we can assume that the consumer cares about the previous data
+      dispatch({
+        type: actionTypes.RESET_STATE,
+        initialState: initialState
+      });
+    }
   }, [stringifiedCacheKey]); // eslint-disable-line react-hooks/exhaustive-deps
-  // arguments to fetchData override the useClientRequest arguments
 
+  React.useEffect(function () {
+    isMounted.current = true;
+    return function () {
+      isMounted.current = false;
+    };
+  }, []); // arguments to fetchData override the useClientRequest arguments
+
   function fetchData(newOpts) {
+    if (!isMounted.current) return Promise.resolve();
+
     var revisedOpts = _objectSpread({}, initialOpts, newOpts);
@@ -348,6 +358,9 @@
 
-      dispatch({
-        type: actionTypes.REQUEST_RESULT,
-        result: result
-      });
+      if (isMounted.current) {
+        dispatch({
+          type: actionTypes.REQUEST_RESULT,
+          result: result
+        });
+      }
+
       return result;
@@ -354,0 +367,0 @@ });

package.json

 {
   "name": "graphql-hooks",
-  "version": "3.2.4",
+  "version": "3.2.5",
   "description": "Graphql Hooks",
@@ -11,3 +11,3 @@ "main": "lib/graphql-hooks.js",
     "prepublishOnly": "npm run build && cp ../../README.md . && cp ../../LICENSE .",
-    "postpublish": "rm README.md && rm LICENSE"
+    "postpublish": "rm ./README.md && rm ./LICENSE"
   },
@@ -36,4 +36,4 @@ "files": [
     "jest-fetch-mock": "2.1.1",
-    "react": "16.8.3",
-    "react-dom": "16.8.3",
+    "react": "16.8.4",
+    "react-dom": "16.8.4",
     "react-hooks-testing-library": "0.3.4",
@@ -55,3 +55,3 @@ "react-testing-library": "6.0.0",
   "homepage": "https://github.com/nearform/graphql-hooks#readme",
-  "gitHead": "adad40b36bb33c09169ce212de3c2edbdc65ec6e"
+  "gitHead": "93f125085634fa3ed63c5e4f6a3bcb8358e72e68"
 }

README.md

@@ -44,7 +44,7 @@ # graphql-hooks
 ```js
-import { GraphQLClient, ClientContext } from 'graphql-hooks';
+import { GraphQLClient, ClientContext } from 'graphql-hooks'
 
 const client = new GraphQLClient({
   url: '/graphql'
-});
+})
 
@@ -56,3 +56,3 @@ function App() {
     </ClientContext.Provider>
-  );
+  )
 }
@@ -64,3 +64,3 @@ ```
 ```js
-import { useQuery } from 'graphql-hooks';
+import { useQuery } from 'graphql-hooks'
 
@@ -72,3 +72,3 @@ const HOMEPAGE_QUERY = `query HomePage($limit: Int) {
   }
-}`;
+}`
 
@@ -80,6 +80,6 @@ function MyComponent() {
     }
-  });
+  })
 
-  if (loading) return 'Loading...';
-  if (error) return 'Something Bad Happened';
+  if (loading) return 'Loading...'
+  if (error) return 'Something Bad Happened'
 
@@ -92,3 +92,3 @@ return (
     </ul>
-  );
+  )
 }
@@ -119,4 +119,4 @@ ```
 ```js
-import { GraphQLClient } from 'graphql-hooks';
-const client = new GraphQLClient(config);
+import { GraphQLClient } from 'graphql-hooks'
+const client = new GraphQLClient(config)
 ```
@@ -160,6 +160,6 @@
 ```js
-import { ClientContext } from 'graphql-hooks';
+import { ClientContext } from 'graphql-hooks'
 <ClientContext.Provider value={client}>
   {/* children can now consume the client context */}
-</ClientContext.Provider>;
+</ClientContext.Provider>
 ```
@@ -170,7 +170,7 @@
 ```js
-import React, { useContext } from 'react';
-import { ClientContext } from 'graphql-hooks';
+import React, { useContext } from 'react'
+import { ClientContext } from 'graphql-hooks'
 
 function MyComponent() {
-  const client = useContext(ClientContext);
+  const client = useContext(ClientContext)
 }
@@ -184,3 +184,3 @@ ```
 ```js
-const state = useQuery(query, [options]);
+const state = useQuery(query, [options])
 ```
@@ -191,11 +191,11 @@
 ```js
-import { useQuery } from 'graphql-hooks';
+import { useQuery } from 'graphql-hooks'
 
 function MyComponent() {
-  const { loading, error, data } = useQuery(query);
+  const { loading, error, data } = useQuery(query)
 
-  if (loading) return 'Loading...';
-  if (error) return 'Something bad happened';
+  if (loading) return 'Loading...'
+  if (error) return 'Something bad happened'
 
-  return <div>{data.thing}</div>;
+  return <div>{data.thing}</div>
 }
@@ -221,3 +221,3 @@ ```
 ```js
-const { loading, error, data, refetch, cacheHit, ...errors } = useQuery(QUERY);
+const { loading, error, data, refetch, cacheHit, ...errors } = useQuery(QUERY)
 ```
@@ -242,3 +242,3 @@
 ```js
-const [queryFn, state] = useManualQuery(query, [options]);
+const [queryFn, state] = useManualQuery(query, [options])
 ```
@@ -270,6 +270,6 @@
 ```js
-import { useManualQuery } from 'graphql-hooks';
+import { useManualQuery } from 'graphql-hooks'
 
 function MyComponent(props) {
-  const [fetchUser] = useManualQuery(GET_USER_QUERY);
+  const [fetchUser] = useManualQuery(GET_USER_QUERY)
 
@@ -279,5 +279,5 @@ const fetchUserThenSomething = async () => {
       variables: { id: props.userId }
-    });
-    return somethingElse();
-  };
+    })
+    return somethingElse()
+  }
 
@@ -288,3 +288,3 @@ return (
     </div>
-  );
+  )
 }
@@ -300,3 +300,3 @@ ```
 ```js
-const [mutationFn, state] = useMutation(mutation, [options]);
+const [mutationFn, state] = useMutation(mutation, [options])
 ```
@@ -307,3 +307,3 @@
 ```js
-import { useMutation } from 'graphql-hooks';
+import { useMutation } from 'graphql-hooks'
 
@@ -314,7 +314,7 @@ const UPDATE_USER_MUTATION = `mutation UpdateUser(id: String!, name: String!) {
   }
-}`;
+}`
 
 function MyComponent({ id, name }) {
-  const [updateUser] = useMutation(UPDATE_USER_MUTATION);
-  const [newName, setNewName] = useState(name);
+  const [updateUser] = useMutation(UPDATE_USER_MUTATION)
+  const [newName, setNewName] = useState(name)
 
@@ -332,3 +332,3 @@ return (
     </div>
-  );
+  )
 }
@@ -365,3 +365,3 @@ ```
   }
-`;
+`
 ```
@@ -376,18 +376,18 @@
 ```jsx
-import { React, useState } from 'react';
-import { useQuery } from 'graphql-hooks';
+import { React, useState } from 'react'
+import { useQuery } from 'graphql-hooks'
 
 export default function PostList() {
   // set a default offset of 0 to load the first page
-  const [skipCount, setSkipCount] = useState(0);
+  const [skipCount, setSkipCount] = useState(0)
 
   const { loading, error, data } = useQuery(allPostsQuery, {
     variables: { skip: skipCount, first: 10 }
-  });
+  })
 
-  if (error) return <div>There was an error!</div>;
-  if (loading && !data) return <div>Loading</div>;
+  if (error) return <div>There was an error!</div>
+  if (loading && !data) return <div>Loading</div>
 
-  const { allPosts, _allPostsMeta } = data;
-  const areMorePosts = allPosts.length < _allPostsMeta.count;
+  const { allPosts, _allPostsMeta } = data
+  const areMorePosts = allPosts.length < _allPostsMeta.count
 
@@ -418,3 +418,3 @@ return (
     </section>
-  );
+  )
 }
@@ -428,4 +428,4 @@ ```
 ```jsx
-import { React, useState } from 'react';
-import { useQuery } from 'graphql-hooks';
+import { React, useState } from 'react'
+import { useQuery } from 'graphql-hooks'
 
@@ -436,6 +436,6 @@ // use options.updateData to append the new page of posts to our current list of posts
   allPosts: [...prevData.allPosts, ...data.allPosts]
-});
+})
 
 export default function PostList() {
-  const [skipCount, setSkipCount] = useState(0);
+  const [skipCount, setSkipCount] = useState(0)
 
@@ -446,9 +446,9 @@ const { loading, error, data } = useQuery(
     updateData
-  );
+  )
 
-  if (error) return <div>There was an error!</div>;
-  if (loading && !data) return <div>Loading</div>;
+  if (error) return <div>There was an error!</div>
+  if (loading && !data) return <div>Loading</div>
 
-  const { allPosts, _allPostsMeta } = data;
-  const areMorePosts = allPosts.length < _allPostsMeta.count;
+  const { allPosts, _allPostsMeta } = data
+  const areMorePosts = allPosts.length < _allPostsMeta.count
 
@@ -473,3 +473,3 @@ return (
     </section>
-  );
+  )
 }
@@ -476,0 +476,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

65119

increased by2.56%

Number of package files

9

increased by12.5%

Lines of code

1130

increased by3.01%

No dependency changes