Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: apollo client dev tools #1516

Draft
wants to merge 55 commits into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
55 commits
Select commit Hold shift + click to select a range
e62f545
Initial reactotron-apollo-client
Sep 8, 2023
325cd83
fix(apollo-client): get build working
frankcalise Oct 15, 2023
0c984ca
chore: lint fixes
frankcalise Oct 15, 2023
a028397
feat(search): search obj values from display cmd
frankcalise Oct 17, 2023
9d80011
feat(app): apollo client ui and routes
frankcalise Oct 17, 2023
4a31bd4
feat(apollo-client): cache subscriptions
frankcalise Oct 17, 2023
1f278a4
Add apollo to the reactotron example app.
markrickert Feb 14, 2024
490f544
Readme update for reactotron-apollo-client
markrickert Feb 14, 2024
0f5281e
feat(reactotron-app): Each client now has an explicit list of plugins.
markrickert Feb 14, 2024
467392e
Fix some linting issues in reactotron-apollo-client
markrickert Feb 14, 2024
6308fcf
Reapply changes from #1439 to the reactotron-apollo-client
markrickert Feb 14, 2024
13664a1
Export the apollo-client properly.
markrickert Feb 14, 2024
76e5942
refactor: remove prev deleted files
frankcalise Mar 22, 2024
adea63d
chore: fix bad merge
frankcalise Mar 22, 2024
ed6688e
feat(example-app): apollo detail screen
frankcalise Mar 22, 2024
3c40be8
chore(apollo-client): add some debug
frankcalise Mar 22, 2024
ae12112
Adding name to redux plugin to fix build error
morganick Mar 22, 2024
86371c9
fix(example-app): observer apollo screens
frankcalise Mar 22, 2024
24506a6
feat(apollo-client): WIP server side comms
frankcalise Sep 25, 2024
a32cd02
feat(core-ui): add apollo client context
frankcalise Oct 17, 2024
81cc42c
feat(core-ui): allow for valueRenderer override in TreeView
frankcalise Oct 17, 2024
609d2e5
feat(apollo-client): render cache keys and body with search
frankcalise Oct 17, 2024
ff0f52d
chore(tree-view): remove console log
frankcalise Oct 18, 2024
53e4d41
fix(reactotron): move apollo provider
frankcalise Oct 18, 2024
7d0fcea
fix(core-ui): add cache key to apollo ctx
frankcalise Oct 18, 2024
53cded5
fix(core-ui): expose checkbox component
frankcalise Oct 18, 2024
61ee561
feat(apollo-client): search cache by key or data
frankcalise Oct 18, 2024
99954d9
feat(apollo-client): cache expand initially option
frankcalise Oct 18, 2024
928af8e
feat(cache): implement pinned keys
frankcalise Oct 18, 2024
bfbab46
chore(cache): clean up
frankcalise Oct 18, 2024
c163c69
fix(apollo-client): highlight selected pinned cache key
frankcalise Oct 18, 2024
b750011
fix(core-ui): add foregroundDarker
frankcalise Oct 18, 2024
fad56bc
feat(apollo-client): add cache forward/back history buttons
frankcalise Oct 18, 2024
3092bc8
feat(apollo-client): add launch external url for specific data
frankcalise Oct 19, 2024
19820d2
feat(apollo-client): view __ref data via tooltip
frankcalise Oct 19, 2024
5c1c148
feat(apollo-client): restore last viewed key after tab nav
frankcalise Oct 20, 2024
465cca4
feat(apollo-client): persist pinned keys across tab change
frankcalise Oct 20, 2024
6cd773a
refactor(apollo-client): move data to ctx
frankcalise Oct 20, 2024
5f0340c
fix(example-app): remove temp mutate button on ApolloScreen
frankcalise Oct 20, 2024
d2f7d8d
feat(apollo-client): wire up edit cache data with temp value
frankcalise Oct 20, 2024
1845ec0
feat(apollo-client): implement edit cache value from UI
frankcalise Oct 20, 2024
efad80a
fix(apollo-client): type specific inputs for edit cache values
frankcalise Oct 21, 2024
cf083c9
feat(apollo-client): lock root query and cache key editing
frankcalise Oct 22, 2024
7c7c587
fix(sidebar): only load apollo tab if plugin available
frankcalise Oct 22, 2024
bd33335
feat(apollo-client): add copy object
frankcalise Oct 29, 2024
3945d17
refactor(apollo-client): move polling apollo state out of cache tab
frankcalise Oct 29, 2024
0968774
style(cache): fix left/right panel scrolling
frankcalise Oct 29, 2024
8476583
chore: merge branch 'master' into frankcalise/reactotron-apollo-client
frankcalise Oct 30, 2024
ef093f6
fix(apollo-client): fix rollup config
frankcalise Oct 30, 2024
f62d7af
chore: lint fixes
frankcalise Oct 30, 2024
06416f4
chore: merge branch 'master' into frankcalise/reactotron-apollo-client
frankcalise Oct 30, 2024
484519a
test: fix plugin objects needing name
frankcalise Oct 30, 2024
4c1b345
test(filter-commands): remove search object value test
frankcalise Oct 30, 2024
2776ac8
chore: typecheck fixes
frankcalise Oct 30, 2024
86ff6cd
Merge branch 'master' into frankcalise/reactotron-apollo-client
frankcalise Nov 14, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat(apollo-client): restore last viewed key after tab nav
  • Loading branch information
frankcalise committed Oct 20, 2024
commit 5c1c148d4f885dc7bd60b70cdfa229af5f6f1dd9
194 changes: 71 additions & 123 deletions apps/reactotron-app/src/renderer/pages/apolloClient/Cache.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
Checkbox,
Tooltip,
} from "reactotron-core-ui"
import { MdSearch, MdWarning } from "react-icons/md"
import { TbDatabaseDollar } from "react-icons/tb"
import { Title } from "../reactNative/components/Shared"
import { CommandType } from "reactotron-core-contract"
Expand All @@ -33,19 +32,7 @@ const CacheContainer = styled.div`
const TopSection = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
`

const WarningContainer = styled.div`
display: flex;
color: ${(props) => props.theme.warning};
background-color: ${(props) => props.theme.backgroundDarker};
border-top: 1px solid ${(props) => props.theme.chromeLine};
align-items: center;
padding: 0 20px;
`
const WarningDescription = styled.div`
margin-left: 20px;
padding-left: 10px;
`

const SearchContainer = styled.div`
Expand Down Expand Up @@ -90,6 +77,10 @@ const IconContainer = styled.span`
padding-left: 10px;
`

const TreeContainer = styled.div`
padding-left: 10px;
`

const LeftPanel = styled.div`
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -180,24 +171,21 @@ const INITIAL_DATA = {
}

function Cache() {
// This could go to the context? but we grab it on mount
const [data, setData] = React.useState<any>(INITIAL_DATA)
const { sendCommand, addCommandListener } = React.useContext(ReactotronContext)
const {
isSearchOpen,
toggleSearch,
closeSearch,
setSearch,
search,
setCacheKey,
cacheKey: storedCacheKey,
viewedKeys,
setViewedKeys,
currentIndex,
goForward,
goBack,
getCurrentKey,
} = useContext(ApolloClientContext)

const [viewedKeys, setViewedKeys] = React.useState<string[]>([])

// const sendMessage = React.useCallback(() => {
// sendCommand("apollo.request", {})
// }, [sendCommand])

// send polling apollo.request command every half second
React.useEffect(() => {
const interval = setInterval(() => {
Expand All @@ -206,32 +194,21 @@ function Cache() {
return () => clearInterval(interval)
}, [sendCommand])

// TODO rework this to be custom from the UI to send data from server to client
// below is an example
// const updateFragment = React.useCallback(() => {
// sendCommand("apollo.fragment.update", { message: "Title from server" })
// }, [sendCommand])

const resyncData = React.useCallback(() => {
debounce(() => {
sendCommand("apollo.request", {})
})
}, [sendCommand])

React.useEffect(() => {
addCommandListener((command) => {
if (command.type === CommandType.ApolloClientResponse) {
// TODO reorder the way things come in so recent is at top
// see https://github.com/expo/dev-plugins/blob/main/packages/apollo-client/webui/src/App.tsx#L44-L46
// TODO reorder the way things come in so recent is at top ?
setData(command.payload)
sendCommand("apollo.ack", {})
resyncData()
}
})
}, [addCommandListener, sendCommand, resyncData])

React.useEffect(() => {
sendCommand("apollo.request", {})
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
}, [addCommandListener, sendCommand])

const handleInputChange = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
Expand All @@ -240,52 +217,35 @@ function Cache() {
[setSearch]
)

// const { searchString, handleInputChange } = useDebouncedSearchInput(search, setSearch, 300)

const { cacheKey } = useParams()
const { cacheKey: routeKey } = useParams()
const navigate = useNavigate()
const [currentIndex, setCurrentIndex] = React.useState(-1)

// const [history, setHistory] = useState([]);
/**
* if we have unmounted via another tab press,
* restore the last key we were viewing when user returns here
*/
useEffect(() => {
if (!routeKey) {
const lastItem = getCurrentKey()
if (lastItem) {
navigate(`/apolloClient/cache/${lastItem}`)
}
}
}, [routeKey, getCurrentKey, navigate])

useEffect(() => {
// Check if cacheKey is new
if (cacheKey && (currentIndex === -1 || history[currentIndex] !== cacheKey)) {
const newIndex = viewedKeys.indexOf(cacheKey)
if (newIndex === -1) {
// New cacheKey, add to history
const newHistory = [...viewedKeys, cacheKey]
setViewedKeys(newHistory)
setCurrentIndex(newHistory.length - 1)
} else {
// Existing cacheKey, just update the current index
setCurrentIndex(newIndex)
}
const currentItem = getCurrentKey()
if (routeKey && currentItem !== routeKey) {
// TODO rename `setViewedKeys` to `addKeyToHistory`
setViewedKeys(routeKey)
}
}, [cacheKey, viewedKeys, currentIndex])
}, [routeKey, setViewedKeys, getCurrentKey])

function openURL(url) {
shell.openExternal(url)
}

const goBack = () => {
// Navigate to the previous cacheKey in the history
const currentPos = viewedKeys.indexOf(cacheKey)
if (currentPos > 0) {
navigate(`/apolloClient/cache/${viewedKeys[currentPos - 1]}`)
setCurrentIndex(currentIndex - 1)
}
}

const goForward = () => {
// Navigate to the next cacheKey in the history
const currentPos = viewedKeys.indexOf(cacheKey)
if (currentPos < viewedKeys.length - 1) {
navigate(`/apolloClient/cache/${viewedKeys[currentPos + 1]}`)
setCurrentIndex(currentIndex + 1)
}
}

const cacheKey = getCurrentKey() ?? routeKey
const cacheData = data.cache[cacheKey] ?? undefined

const forwardDisabled = currentIndex === viewedKeys.length - 1
Expand All @@ -301,6 +261,7 @@ function Cache() {
}
}

// TODO add these options to the context in order to not lose state on tab switch
const [searchObjects, setSearchObjects] = React.useState(false)
const [expandInitially, setExpandInitially] = React.useState(true)
const [pinnedKeys, setPinnedKeys] = React.useState<string[]>([])
Expand Down Expand Up @@ -391,49 +352,43 @@ function Cache() {
// },
// },
]}
actions={[
{
tip: "Search",
icon: MdSearch,
onClick: () => {
toggleSearch()
},
},
]}
// actions={[
// {
// tip: "Search",
// icon: MdSearch,
// onClick: () => {
// toggleSearch()
// },
// },
// ]}
>
{isSearchOpen && (
<SearchContainer>
<VerticalContainer>
<SearchContainer>
<SearchInput
placeholder="Search..."
autoFocus
value={search}
onChange={handleInputChange}
/>
<ButtonContainer onClick={clearSearch}>
<FaTimes size={24} />
</ButtonContainer>
</SearchContainer>
<Checkbox
label="Include object values"
onToggle={() => setSearchObjects(!searchObjects)}
isChecked={searchObjects}
<SearchContainer>
<VerticalContainer>
<SearchContainer>
<SearchInput
placeholder="Search..."
autoFocus
value={search}
onChange={handleInputChange}
/>
<Checkbox
label="Expand data initially"
onToggle={() => setExpandInitially(!expandInitially)}
isChecked={expandInitially}
/>
</VerticalContainer>
</SearchContainer>
)}
<ButtonContainer onClick={clearSearch}>
<FaTimes size={24} />
</ButtonContainer>
</SearchContainer>
<Checkbox
label="Include object values"
onToggle={() => setSearchObjects(!searchObjects)}
isChecked={searchObjects}
/>
<Checkbox
label="Expand data initially"
onToggle={() => setExpandInitially(!expandInitially)}
isChecked={expandInitially}
/>
</VerticalContainer>
</SearchContainer>
</Header>
<CacheContainer>
<WarningContainer>
<MdWarning size={60} />
<WarningDescription>This is preview feature.</WarningDescription>
</WarningContainer>
<RowContainer>
<LeftPanel>
{/* always show pinnedKeys */}
Expand Down Expand Up @@ -482,11 +437,7 @@ function Cache() {
const LinkWrapper = key === cacheKey ? SelectedCacheKeyLink : CacheKeyLink
return (
<Row key={key}>
<LinkWrapper
key={key}
// onClick={() => pushViewedKey(key)}
to={`/apolloClient/cache/${key}`}
>
<LinkWrapper key={key} to={`/apolloClient/cache/${key}`}>
<CacheKeyLabel>
{!searchObjects ? (
<HighlightText text={key} searchTerm={search} />
Expand Down Expand Up @@ -519,12 +470,9 @@ function Cache() {
</Row>
<TopSection>
<Title>Cache ID: {cacheKey}</Title>
<Link to="/apolloClient/cache">
<FaTimes size={24} color={theme.foregroundDark} />
</Link>
</TopSection>

{cacheKey && (
{cacheData && currentIndex >= -1 && (
<TreeView
value={{ ...cacheData }}
expand={expandInitially}
Expand Down
36 changes: 28 additions & 8 deletions lib/reactotron-core-ui/src/contexts/ApolloClient/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,13 @@ interface Context {
closeSearch: () => void
search: string
setSearch: (search: string) => void
cacheKey: string
setCacheKey: (cacheKey: string) => void
viewedKeys: string[]
setViewedKeys: (viewedKey: string) => void
currentIndex: number
setCurrentIndex: (currentIndex: number) => void
getCurrentKey: () => string | null
goForward: () => void
goBack: () => void
}

const ApolloClientContext = React.createContext<Context>({
Expand All @@ -20,8 +25,13 @@ const ApolloClientContext = React.createContext<Context>({
closeSearch: null,
search: "",
setSearch: null,
cacheKey: "",
setCacheKey: null,
viewedKeys: [],
setViewedKeys: null,
currentIndex: -1,
setCurrentIndex: null,
getCurrentKey: null,
goForward: null,
goBack: null,
})

const Provider: FunctionComponent<any> = ({ children }) => {
Expand All @@ -32,8 +42,13 @@ const Provider: FunctionComponent<any> = ({ children }) => {
closeSearch,
search,
setSearch,
cacheKey,
setCacheKey,
setViewedKeys,
viewedKeys,
currentIndex,
setCurrentIndex,
getCurrentKey,
goBack,
goForward,
} = useApolloClient()

return (
Expand All @@ -45,8 +60,13 @@ const Provider: FunctionComponent<any> = ({ children }) => {
closeSearch,
search,
setSearch,
cacheKey,
setCacheKey,
viewedKeys,
setViewedKeys,
currentIndex,
setCurrentIndex,
getCurrentKey,
goBack,
goForward,
}}
>
{children}
Expand Down
Loading