fix: Fix multi query wrapper component

examples/react-graphql/client/src/layout/Layout.tsx

@@ -20,8 +20,7 @@ import * as queries from '../queries'
 interface DashboardProps {}
 
 const renderCredentialQuery = (props: any) => {
-  console.log(props)
-  return <Credential detailMode {...props} />
+  return <Credential detailMode {...props?.credential} />
 }
 
 const Dashboard: React.FC<DashboardProps> = () => {
@@ -56,6 +55,13 @@ const Dashboard: React.FC<DashboardProps> = () => {
           </Switch>
         </Box>
 
+        {/* 
+          The SidePanel component is a query wrapper that can query for any detail item based on the :id param. 
+          If renderQuery prop is not passed in then it will ignore and just show the children.
+          The use case is if you need to have reusable components and not have embbeded GQL queries inside. 
+          ie all components in the components directory should be reusable
+        */}
+
         <Switch>
           <Route path="/identities/user/:id">
             <SidePanel title={'Identity'} closeUrl={'/identities'}>

examples/react-graphql/client/src/layout/SidePanel.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Box, Heading, Icon } from 'rimble-ui'
 import { useHistory, useParams } from 'react-router-dom'
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery, useLazyQuery } from '@apollo/react-hooks'
 
 interface Props {
   title: string
@@ -14,10 +14,16 @@ const Component: React.FC<Props> = ({ title, closeUrl, query, children, renderQu
   let history = useHistory()
   const { id } = useParams()
 
-  const { loading: queryLoading, data: queryData } = useQuery(query, {
+  const [getQuery, { loading, data }] = useLazyQuery(query, {
     variables: { id },
   })
 
+  useEffect(() => {
+    if (renderQuery) {
+      getQuery()
+    }
+  }, [id])
+
   return (
     <Box width={450} bg="#1C1C1C" borderLeft={1} borderColor={'#4B4B4B'}>
       <Box
@@ -33,9 +39,9 @@ const Component: React.FC<Props> = ({ title, closeUrl, query, children, renderQu
         <Icon name={'Close'} onClick={() => history.push(closeUrl)} style={{ cursor: 'pointer' }} />
       </Box>
 
-      {renderQuery && queryData && (
+      {renderQuery && data && (
         <Box p={3} pb={64} className={'scroll-container'}>
-          {renderQuery(queryData?.credential)}
+          {renderQuery(data)}
         </Box>
       )}
 

examples/react-graphql/client/src/queries.ts

@@ -25,6 +25,16 @@ export const credential = gql`
   }
 `
 
+export const identity = gql`
+  query identity($did: ID!) {
+    identity(did: $did) {
+      did
+      type
+      shortId
+    }
+  }
+`
+
 export const managedIdentities = gql`
   query managedIdentities {
     managedIdentityTypes

examples/react-graphql/client/src/views/Identity/IdentityDetail.tsx

@@ -5,7 +5,9 @@ import { AppContext } from '../../context/AppProvider'
 import { useMutation } from '@apollo/react-hooks'
 import * as queries from '../../queries'
 
-const Component = () => {
+interface IdentityDetail {}
+
+const Component: React.FC<IdentityDetail> = () => {
   let { id } = useParams()
   let history = useHistory()
   const [appState, setDefaultDid] = useContext(AppContext)