WithCurrentUser.ts -> WithCurrentUser.tsx

Author: rohit-ravikoti

packages/gatsby-theme/src/utils/auth/WithCurrentUser.ts renamed to packages/gatsby-theme/src/utils/auth/WithCurrentUser.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { Query } from 'react-apollo';
 import { optionalChaining } from '../helpers';
 import gql from 'graphql-tag';
-import { User } from 'src/graphqlTypes';
+import { CurrentUserQuery, User } from 'src/graphqlTypes';
 
 type ChildrenRenderProps = {
-  user?: User | boolean;
+  user?: Pick<User, 'id' | 'name' | 'avatarUrl' | 'githubHandle'> | boolean;
   loading?: boolean;
 };
 type WithCurrentUserProps = {
@@ -14,20 +14,21 @@ type WithCurrentUserProps = {
 
 const WithCurrentUser: React.FunctionComponent<WithCurrentUserProps> = ({
   children,
-}) => (
-  <Query query={CURRENT_USER}>
-    {({ data, error, loading }) => {
-      if (loading) {
-        return children({ loading });
-      }
-      if (optionalChaining(() => data.viewer.user)) {
-        return children({ user: data.viewer.user });
-      } else {
+}) => {
+  return (
+    <Query<CurrentUserQuery> query={CURRENT_USER} >
+      {({ data, loading }) => {
+        if (loading) {
+          return children({ loading });
+        }
+        if (optionalChaining(() => data!.viewer!.user)) {
+          return children({ user: data!.viewer!.user });
+        }
         return children({ user: false });
-      }
-    }}
-  </Query>
-);
+      }}
+    </Query>
+  )
+};
 
 export const CURRENT_USER = gql`
   query currentUser {
@@ -36,11 +37,11 @@ export const CURRENT_USER = gql`
       user {
         id
         name
-        avatarUrl
-        githubHandle
-      }
+      avatarUrl
+      githubHandle
     }
   }
+}
 `;
 
 export default WithCurrentUser;