├── README.md ├── package.json └── packages ├── .watchmanconfig ├── flipper-plugin-apollo-client-devtools ├── .gitignore ├── .watchmanconfig ├── README.md ├── package-lock.json ├── package.json ├── src │ ├── App.tsx │ ├── devtools │ │ ├── Images │ │ │ ├── Apollo.js │ │ │ ├── GraphQL.js │ │ │ ├── Queries.js │ │ │ ├── Store.js │ │ │ └── Warning.js │ │ ├── bridge.ts │ │ ├── components │ │ │ ├── Inspector │ │ │ │ └── Inspector.js │ │ │ ├── Panel.js │ │ │ ├── Sidebar.js │ │ │ └── bridge │ │ │ │ └── index.js │ │ └── context │ │ │ ├── StorageContext.js │ │ │ └── StorageContextProvider.js │ └── index.tsx ├── tsconfig.json └── yarn.lock └── react-native-flipper-apollo-devtools ├── .gitignore ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── src ├── enableApolloDevtools.ts └── index.ts └── tsconfig.json /README.md: -------------------------------------------------------------------------------- 1 | ## Apollo Client Devtools Flipper plugin 2 | 3 | This repo is a monorepo for: 4 | 5 | 1. [Flipper plugin](packages/flipper-plugin-apollo-client-devtools) for Apollo Client Devtool 6 | 2. [React Native package](packages/react-native-flipper-apollo-devtools) to connect to the flipper plugin 7 | 8 | ### Experimental 9 | 10 | Note this is early alpha release, not covering all the features of Apollo Client devtools. Feel free to contribute to add functionality! 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "workspaces": { 4 | "packages": [ 5 | "packages/*" 6 | ] 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /packages/flipper-plugin-apollo-client-devtools/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist/ 3 | -------------------------------------------------------------------------------- /packages/flipper-plugin-apollo-client-devtools/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /packages/flipper-plugin-apollo-client-devtools/README.md: -------------------------------------------------------------------------------- 1 | ## Apollo Client devtools plugin for Flipper 2 | 3 | This is the plugin for Apollo Client devtools meant to enable 4 | using the devtools while debugging React Native app. 5 | 6 | ### Instructions how to use 7 | 8 | 1. [Follow Instructions](../react-native-flipper-apollo-devtools) how to enable your React Native app to connect 9 | to the flipper plugin 10 | 2. Enable this plugin in the flipper 11 | - Manage plugins 12 | - Search and install apollo-client-devtools 13 | -------------------------------------------------------------------------------- /packages/flipper-plugin-apollo-client-devtools/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://fbflipper.com/schemas/plugin-package/v2.json", 3 | "name": "flipper-plugin-apollo-client-devtools", 4 | "id": "apollo-client-devtools", 5 | "version": "0.0.1", 6 | "main": "dist/bundle.js", 7 | "flipperBundlerEntry": "src/index.tsx", 8 | "license": "MIT", 9 | "keywords": [ 10 | "flipper-plugin" 11 | ], 12 | "icon": "apps", 13 | "title": "Apollo Client Devtools", 14 | "scripts": { 15 | "lint": "flipper-pkg lint", 16 | "prepack": "flipper-pkg lint && flipper-pkg bundle", 17 | "build": "flipper-pkg bundle", 18 | "watch": "flipper-pkg bundle --watch", 19 | "prepublishOnly": "npm build" 20 | }, 21 | "peerDependencies": { 22 | "flipper": "latest" 23 | }, 24 | "devDependencies": { 25 | "@types/react": "latest", 26 | "@types/react-dom": "latest", 27 | "flipper": "latest", 28 | "flipper-pkg": "latest" 29 | }, 30 | "dependencies": { 31 | "lodash.flattendeep": "^4.4.0", 32 | "prop-types": "^15.7.2" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /packages/flipper-plugin-apollo-client-devtools/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { PluginClient } from "flipper"; 3 | import Bridge from "./devtools/bridge"; 4 | import { BridgeProvider } from "./devtools/components/bridge"; 5 | import { StorageContextProvider } from "./devtools/context/StorageContextProvider"; 6 | import Panel from "./devtools/components/Panel"; 7 | 8 | type Props = { 9 | client: PluginClient; 10 | }; 11 | 12 | export const App = ({ client }: Props) => { 13 | const [listeners, setListeners] = useState>([]); 14 | const [shell, setShell] = useState({ 15 | connect: (cb: Function) => { 16 | cb(bridge); 17 | }, 18 | onReload: () => {}, 19 | localStorage, 20 | }); 21 | const [bridge, setBridge] = useState( 22 | () => 23 | new Bridge({ 24 | listen(fn: Function) { 25 | const listener = (evt) => { 26 | if ( 27 | evt.data.source === "apollo-devtools-backend" && 28 | evt.data.payload 29 | ) { 30 | console.log("listener captured an event: ", evt); 31 | fn(evt.data.payload); 32 | } 33 | }; 34 | window.addEventListener("message", listener); 35 | setListeners([...listeners, listener]); 36 | }, 37 | send(data: object) { 38 | console.log("sending data", data); 39 | window.postMessage( 40 | { 41 | source: "apollo-devtools-backend", 42 | payload: data, 43 | }, 44 | "*" 45 | ); 46 | }, 47 | }) 48 | ); 49 | useEffect(() => { 50 | shell.connect((bridge: Bridge) => { 51 | bridge.send("ready", "3.0.0"); 52 | }); 53 | client.subscribe("broadcast:new", (data) => { 54 | console.log("broadcast:new received .. ", data); 55 | bridge?.send("broadcast:new", data); 56 | }); 57 | }, [shell]); 58 | 59 | console.log({ client }); 60 | // return
Dev tools!
; 61 | if (bridge === undefined && shell === undefined) { 62 | return null; 63 | } 64 | return ( 65 | 66 | 67 | 68 | 69 | 70 | ); 71 | }; 72 | -------------------------------------------------------------------------------- /packages/flipper-plugin-apollo-client-devtools/src/devtools/Images/Apollo.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "@emotion/styled"; 3 | 4 | export default () => ( 5 | 14 | 15 | 20 | 31 | 32 | 33 | ); 34 | 35 | const ApolloSvg = styled.svg({ 36 | display: "inline-block", 37 | width: "40%", 38 | maxWidth: "50px", 39 | minWidth: "20px", 40 | height: "30px", 41 | verticalAlign: "top", 42 | }); 43 | -------------------------------------------------------------------------------- /packages/flipper-plugin-apollo-client-devtools/src/devtools/Images/GraphQL.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "@emotion/styled"; 3 | 4 | export default ({ active }) => ( 5 | 6 | 10 | 14 | 18 | 22 | 23 | ); 24 | 25 | const GraphQLSvg = styled.svg({ 26 | display: "inline-block", 27 | width: "40%", 28 | maxWidth: "50px", 29 | minWidth: "20px", 30 | height: "30px", 31 | verticalAlign: "top", 32 | }); 33 | -------------------------------------------------------------------------------- /packages/flipper-plugin-apollo-client-devtools/src/devtools/Images/Queries.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "@emotion/styled"; 3 | 4 | export default ({ active }) => ( 5 | 6 | 10 | 11 | ); 12 | 13 | const QueriesSvg = styled.svg({ 14 | display: "inline-block", 15 | width: "40%", 16 | maxWidth: "50px", 17 | minWidth: "20px", 18 | height: "30px", 19 | verticalAlign: "top", 20 | }); 21 | -------------------------------------------------------------------------------- /packages/flipper-plugin-apollo-client-devtools/src/devtools/Images/Store.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "@emotion/styled"; 3 | 4 | export default ({ active }) => ( 5 | 6 | 10 | 11 | ); 12 | 13 | const StoreSvg = styled.svg({ 14 | display: "inline-block", 15 | width: "40%", 16 | maxWidth: "50px", 17 | minWidth: "20px", 18 | height: "30px", 19 | verticalAlign: "top", 20 | }); 21 | -------------------------------------------------------------------------------- /packages/flipper-plugin-apollo-client-devtools/src/devtools/Images/Warning.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | export default () => ( 3 | 10 | 14 | 15 | ); 16 | -------------------------------------------------------------------------------- /packages/flipper-plugin-apollo-client-devtools/src/devtools/bridge.ts: -------------------------------------------------------------------------------- 1 | import { EventEmitter } from "events"; 2 | 3 | export default class Bridge extends EventEmitter { 4 | constructor(wall) { 5 | super(); 6 | // Setting `this` to `self` here to fix an error in the Safari build: 7 | // ReferenceError: Cannot access uninitialized variable. 8 | // The error might be related to the webkit bug here: 9 | // https://bugs.webkit.org/show_bug.cgi?id=171543 10 | const self = this; 11 | self.setMaxListeners(Infinity); 12 | self.wall = wall; 13 | wall.listen((message) => { 14 | console.log("wall received message", message); 15 | if (typeof message === "string") { 16 | self.emit(message); 17 | } else { 18 | self.emit(message.event, message.payload); 19 | } 20 | }); 21 | } 22 | 23 | send(event, payload) { 24 | console.log("bridge sending an event over the wall:", event); 25 | this.wall.send({ 26 | event, 27 | payload, 28 | }); 29 | } 30 | 31 | log(message) { 32 | this.send("log", message); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /packages/flipper-plugin-apollo-client-devtools/src/devtools/components/Inspector/Inspector.js: -------------------------------------------------------------------------------- 1 | import PropTypes from "prop-types"; 2 | import React from "react"; 3 | import { styled } from "flipper"; 4 | // import { Sidebar } from "../Sidebar"; 5 | // import classnames from "classnames"; 6 | import flattenDeep from "lodash.flattendeep"; 7 | // import "./inspector.less"; 8 | 9 | export default class Inspector extends React.Component { 10 | static childContextTypes = { 11 | inspectorContext: PropTypes.object.isRequired, 12 | }; 13 | 14 | constructor(props) { 15 | super(props); 16 | this.state = { 17 | // dataWithOptimistic: { 18 | // "Response:1": { 19 | // __typename: "Response", 20 | // id: "1", 21 | // world: "Hello world!", 22 | // }, 23 | // ROOT_QUERY: { 24 | // __typename: "Query", 25 | // hello: { __ref: "Response:1" }, 26 | // }, 27 | // }, 28 | // ids: ["ROOT_QUERY", "Response:1"], 29 | dataWithOptimistic: null, 30 | ids: [], 31 | selectedId: null, 32 | toHighlight: {}, 33 | searchTerm: "", 34 | }; 35 | 36 | this.setSearchTerm = this.setSearchTerm.bind(this); 37 | } 38 | 39 | updateDataInStore(dataWithOptimistic) { 40 | let toHighlight = {}; 41 | if (this.state.searchTerm.length >= 3) { 42 | toHighlight = highlightFromSearchTerm({ 43 | data: dataWithOptimistic, 44 | query: this.state.searchTerm, 45 | }); 46 | } 47 | 48 | const unsortedIds = Object.keys(dataWithOptimistic).filter( 49 | (id) => id[0] !== "$" 50 | ); 51 | const highlightedIds = Object.keys(toHighlight).filter( 52 | (id) => id[0] !== "$" && id !== "ROOT_QUERY" 53 | ); 54 | const sortedIdsWithoutRoot = unsortedIds 55 | .filter((id) => id !== "ROOT_QUERY" && highlightedIds.indexOf(id) < 0) 56 | .sort(); 57 | 58 | const ids = 59 | unsortedIds.length === 0 60 | ? [] 61 | : [...highlightedIds, "ROOT_QUERY", ...sortedIdsWithoutRoot]; 62 | 63 | const selectedId = this.state.selectedId || ids[0]; 64 | this.setState({ 65 | dataWithOptimistic, 66 | toHighlight, 67 | ids, 68 | selectedId: this.state.selectedId || ids[0], 69 | }); 70 | } 71 | 72 | componentDidMount() { 73 | // this.updateData(); 74 | if (this.props.state.inspector) { 75 | this.updateDataInStore(this.props.state.inspector); 76 | } 77 | } 78 | 79 | componentWillUnmount() { 80 | clearTimeout(this._interval); 81 | } 82 | 83 | componentWillReceiveProps(nextProps) { 84 | if (!nextProps) { 85 | return [null, null, null, null]; 86 | } 87 | console.log({ nextProps }); 88 | if (nextProps.state && nextProps.state.inspector) { 89 | this.updateDataInStore(nextProps.state.inspector); 90 | } 91 | } 92 | 93 | getChildContext() { 94 | return { 95 | inspectorContext: { 96 | dataWithOptimistic: this.state.dataWithOptimistic, 97 | toHighlight: this.state.toHighlight, 98 | selectId: this.selectId.bind(this), 99 | }, 100 | }; 101 | } 102 | 103 | componentWillUpdate(nextProps, nextState) { 104 | if (nextState.selectedId !== this.state.selectedId) { 105 | function isInViewport(element) { 106 | const rect = element.getBoundingClientRect(); 107 | const html = document.documentElement; 108 | return ( 109 | rect.top >= 0 && 110 | rect.left >= 0 && 111 | rect.bottom <= (window.innerHeight || html.clientHeight) && 112 | rect.right <= (window.innerWidth || html.clientWidth) 113 | ); 114 | } 115 | const node = document.getElementById(nextState.selectedId); 116 | if (node && !isInViewport(node)) node.scrollIntoView(); 117 | } 118 | } 119 | 120 | selectId(id) { 121 | this.setState({ 122 | selectedId: id, 123 | }); 124 | } 125 | 126 | setSearchTerm(searchTerm) { 127 | let toHighlight = {}; 128 | 129 | if (searchTerm.length >= 3) { 130 | toHighlight = highlightFromSearchTerm({ 131 | data: this.state.dataWithOptimistic, 132 | query: searchTerm, 133 | }); 134 | } 135 | 136 | this.setState({ 137 | searchTerm, 138 | toHighlight, 139 | }); 140 | } 141 | 142 | renderSidebarItem(id) { 143 | const isActive = id == this.state.selectedId; 144 | const isHighlighted = this.state.toHighlight[id]; 145 | 146 | return ( 147 | 154 | {id} 155 | 156 | ); 157 | } 158 | 159 | render() { 160 | const { selectedId, dataWithOptimistic, searchTerm, ids } = this.state; 161 | console.log({ ids }); 162 | return ( 163 | 164 | 165 | {/* Sidebar */} 166 | {/*
Inspector
*/} 167 | 168 | Cache 169 | 173 | {ids && ids.map((id) => this.renderSidebarItem(id))} 174 | 175 | 176 | {selectedId && ( 177 | 182 | )} 183 | 184 | 185 | 186 | ); 187 | } 188 | } 189 | 190 | const InspectorPanel = styled.div({ 191 | backgroundColor: "white", 192 | display: "flex", 193 | flexDirection: "column", 194 | }); 195 | 196 | const InspectorBody = styled.div({ 197 | flex: "1", 198 | display: "flex", 199 | }); 200 | 201 | const Sidebar = styled.div({ 202 | flex: "none", 203 | width: "200px", 204 | overflowY: "auto", 205 | borderRight: "1px solid #ddd", 206 | height: "100vh", 207 | }); 208 | 209 | const SidebarTitle = styled.div({ 210 | fontWeight: "bold", 211 | backgroundColor: "#fbfbfb", 212 | borderBottom: "1px solid #ccc", 213 | lineHeight: "33px", 214 | paddingLeft: "10px", 215 | }); 216 | 217 | const InspectorMain = styled.div({ 218 | height: "100vh", 219 | flex: "1", 220 | overflow: "scroll", 221 | fontSize: "12px", 222 | fontFamily: "monospace", 223 | padding: "20px 0", 224 | position: "relative", 225 | }); 226 | 227 | const SidebarItem = styled.div( 228 | { 229 | cursor: "pointer", 230 | padding: "3px 10px", 231 | borderBottom: "1px solid #efefef", 232 | fontSize: "12px", 233 | fontFamily: "monospace", 234 | fontWeight: 100, 235 | }, 236 | (props) => ({ 237 | backgroundColor: props.active 238 | ? "#b5db9c !important" 239 | : props.isHighlighted 240 | ? "#fff59d !important" 241 | : null, 242 | }) 243 | ); 244 | 245 | const InspectorToolbar = ({ searchTerm, setSearchTerm }) => ( 246 | 247 | setSearchTerm(evt.target.value)} 252 | value={searchTerm} 253 | /> 254 | 255 | ); 256 | 257 | const Toolbar = styled.div({ 258 | flex: "0", 259 | backgroundColor: "#f3f3f3", 260 | borderBottom: "#ccc 1px solid", 261 | }); 262 | 263 | const InspectorSearch = styled.input({ 264 | width: "100%", 265 | outline: "none", 266 | border: "none", 267 | padding: "5px 10px", 268 | fontSize: "12px", 269 | }); 270 | 271 | function highlightFromSearchTerm({ data, query }) { 272 | const toHighlight = {}; 273 | 274 | Object.keys(data).forEach((dataId) => { 275 | dfsSearch({ 276 | data, 277 | regex: new RegExp(query), 278 | toHighlight, 279 | dataId, 280 | }); 281 | }); 282 | 283 | return toHighlight; 284 | } 285 | 286 | function dfsSearch({ data, regex, toHighlight, pathToId = [], dataId }) { 287 | const storeObj = data[dataId]; 288 | const storeObjHighlight = {}; 289 | 290 | Object.keys(storeObj).forEach((storeFieldKey) => { 291 | const arr = [storeObj[storeFieldKey]]; 292 | 293 | const flatArr = flattenDeep(arr); 294 | 295 | flatArr.forEach((val) => { 296 | const valueMatches = typeof val === "string" && regex.test(val); 297 | const keyMatches = regex.test(storeFieldKey); 298 | 299 | if (valueMatches || keyMatches) { 300 | storeObjHighlight[storeFieldKey] = val; 301 | } 302 | 303 | if (val && val.id && val.generated) { 304 | dfsSearch({ 305 | data, 306 | regex, 307 | toHighlight, 308 | pathToId: [...pathToId, [dataId, storeFieldKey]], 309 | dataId: val.id, 310 | }); 311 | } 312 | }); 313 | }); 314 | 315 | if (Object.keys(storeObjHighlight).length > 0) { 316 | toHighlight[dataId] = storeObjHighlight; 317 | 318 | pathToId.forEach((pathSegment) => { 319 | toHighlight[pathSegment[0]] = toHighlight[pathSegment[0]] || {}; 320 | toHighlight[pathSegment[0]][pathSegment[1]] = 321 | data[pathSegment[0]][pathSegment[1]]; 322 | }); 323 | } 324 | } 325 | 326 | // Props: data, dataId, expand 327 | class StoreTreeFieldSet extends React.Component { 328 | static contextTypes = { 329 | inspectorContext: PropTypes.object.isRequired, 330 | }; 331 | 332 | constructor(props) { 333 | super(); 334 | this.state = { 335 | expand: props.expand || props.dataId[0] === "$", 336 | }; 337 | 338 | this.toggleExpand = this.toggleExpand.bind(this); 339 | this.selectId = this.selectId.bind(this); 340 | } 341 | 342 | getStoreObj() { 343 | return ( 344 | this.context.inspectorContext.dataWithOptimistic[this.props.dataId] || {} 345 | ); 346 | } 347 | 348 | getHighlightObj() { 349 | return this.context.inspectorContext.toHighlight[this.props.dataId]; 350 | } 351 | 352 | shouldDisplayId() { 353 | return this.props.dataId[0] !== "$"; 354 | } 355 | 356 | keysToDisplay() { 357 | return Object.keys(this.getStoreObj()) 358 | .filter((key) => key !== "__typename") 359 | .sort(); 360 | } 361 | 362 | renderFieldSet({ doubleIndent }) { 363 | const storeObj = this.getStoreObj(); 364 | const highlightObj = this.getHighlightObj(); 365 | 366 | let className = "store-tree-field-set"; 367 | 368 | if (doubleIndent) { 369 | className += " double-indent"; 370 | } 371 | 372 | return ( 373 |
374 | {this.keysToDisplay().map((key) => ( 375 | 381 | ))} 382 |
383 | ); 384 | } 385 | 386 | toggleExpand() { 387 | this.setState(({ expand }) => ({ expand: !expand })); 388 | } 389 | 390 | selectId() { 391 | this.context.inspectorContext.selectId(this.props.dataId); 392 | } 393 | 394 | render() { 395 | return ( 396 | 397 | {this.shouldDisplayId() && ( 398 | 402 | ▾ 403 | {this.props.dataId} 404 | 405 | 406 | )} 407 |
408 | {this.state.expand && 409 | this.renderFieldSet({ doubleIndent: this.shouldDisplayId() })} 410 |
411 | 412 | ); 413 | } 414 | } 415 | 416 | const StoreTreeArray = ({ value }) => { 417 | return ( 418 |
419 | {value.map((item, index) => ( 420 | 421 | ))} 422 |
423 | ); 424 | }; 425 | 426 | const StoreTreeArrayItem = ({ item, index }) => ( 427 |
428 | {index} 429 | : 430 | 431 |
432 | ); 433 | 434 | const StoreTreeObject = ({ value, highlight, inArray }) => { 435 | if (isIdReference(value)) { 436 | return ( 437 | 442 | ); 443 | } 444 | 445 | let className = ""; 446 | 447 | if (typeof value === "string") { 448 | className += " inspector-value-string"; 449 | } 450 | 451 | if (typeof value === "number") { 452 | className += " inspector-value-number"; 453 | } 454 | 455 | if (highlight) { 456 | className += " inspector-highlight"; 457 | } 458 | 459 | return ( 460 | 461 | {value && value.__typename ? ( 462 | 
463 |           {JSON.stringify(value, undefined, 2)}
464 |
465 | ) : ( 466 | JSON.stringify(value) 467 | )} 468 | 469 | ); 470 | }; 471 | 472 | // props: data, value 473 | const StoreTreeValue = (props) => ( 474 | 475 | {Array.isArray(props.value) ? ( 476 | 477 | ) : ( 478 | 479 | )} 480 | 481 | ); 482 | 483 | // Props: data, storeKey, value 484 | class StoreTreeField extends React.Component { 485 | static contextTypes = { 486 | inspectorContext: PropTypes.object.isRequired, 487 | }; 488 | 489 | getPossibleTypename() { 490 | let unwrapped = this.props.value; 491 | let isArray = false; 492 | 493 | while (Array.isArray(unwrapped)) { 494 | unwrapped = unwrapped[0]; 495 | isArray = true; 496 | } 497 | 498 | const targetStoreObj = 499 | unwrapped && 500 | unwrapped.id && 501 | this.context.inspectorContext.dataWithOptimistic[unwrapped.id]; 502 | 503 | const baseTypename = targetStoreObj && targetStoreObj.__typename; 504 | 505 | if (baseTypename && isArray) { 506 | return "[" + baseTypename + "]"; 507 | } 508 | 509 | return baseTypename; 510 | } 511 | 512 | renderPossibleTypename() { 513 | const __typename = this.getPossibleTypename(); 514 | 515 | if (!__typename) { 516 | return ""; 517 | } 518 | 519 | return {__typename}; 520 | } 521 | 522 | render() { 523 | return ( 524 |
525 | 526 | {this.props.storeKey} 527 | 528 | : {this.renderPossibleTypename()} 529 | 533 |
534 | ); 535 | } 536 | } 537 | 538 | const InspectorFieldKey = styled.span( 539 | { 540 | color: "#1f61a0", 541 | }, 542 | (props) => ({ 543 | backgroundColor: props.highlight ? "#fff59d !important" : null, 544 | }) 545 | ); 546 | 547 | const InspectorTypename = styled.span({ 548 | color: "#8b2bb9", 549 | }); 550 | 551 | // Should be imported from AC 552 | function isIdReference(storeObj) { 553 | return storeObj && storeObj.type === "id"; 554 | } 555 | -------------------------------------------------------------------------------- /packages/flipper-plugin-apollo-client-devtools/src/devtools/components/Panel.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { styled } from "flipper"; 3 | import { injectGlobal } from "emotion"; 4 | import { css } from "@emotion/core"; 5 | // import WatchedQueries from "./WatchedQueries"; 6 | // import Mutations from "./Mutations"; 7 | // import Explorer from "./Explorer"; 8 | import Inspector from "./Inspector/Inspector"; 9 | import { Sidebar } from "./Sidebar"; 10 | 11 | import Apollo from "../Images/Apollo"; 12 | import GraphQL from "../Images/GraphQL"; 13 | import Cache from "../Images/Store"; 14 | import Queries from "../Images/Queries"; 15 | 16 | // import "./styles.css"; 17 | 18 | injectGlobal` 19 | * { 20 | box-sizing: border-box; 21 | } 22 | 23 | html, 24 | body, 25 | #devtools { 26 | height: 100%; 27 | width: 100%; 28 | padding: 0; 29 | margin: 0; 30 | font-size: 12px; 31 | color: black; 32 | overflow: hidden; 33 | } 34 | `; 35 | const Shell = ({ children }) => ( 36 |
50 |
{children}
51 |
52 | ); 53 | 54 | const UpgradeNotice = ({ version }) => ( 55 | 56 |

Your Apollo Client needs updating!

57 |

58 | We've detected your version of Apollo Client to be v{version}. The 59 | Apollo Devtools requires version 2.0.0 or greater. Luckily, upgrading is 60 | pretty painless and brings a whole bunch of new features! To learn how to 61 | upgrade, check out the migration guide{" "} 62 | 67 | here! 68 | 69 |

70 |

71 | To continue using the Devtools with v{version}, check out this guide to{" "} 72 | 77 | using the previous version 78 | 79 | . 80 |

81 | 82 | ); 83 | 84 | const Loading = () => ( 85 | 86 |

Connecting to Apollo Client...

87 | 88 | ); 89 | 90 | const NotFound = () => ( 91 | 92 |

93 | We couldn't detect Apollo Client in your app! 94 |

95 |

96 | To use the Apollo Devtools, make sure that connectToDevTools{" "} 97 | is not disabled. To learn more about setting up Apollo Client to work with 98 | the Devtools, checkout this{" "} 99 | 104 | link! 105 | {" "} 106 | The Devtools are turned off by default when running in production. To 107 | manually turn them on, set connectToDevTools to be{" "} 108 | true 109 |

110 | 111 | ); 112 | 113 | export default class Panel extends Component { 114 | constructor(props, context) { 115 | super(props, context); 116 | 117 | this.state = { 118 | active: "graphiql", 119 | tabData: {}, 120 | runQuery: undefined, 121 | runVariables: undefined, 122 | version: undefined, 123 | automaticallyRunQuery: undefined, 124 | // assume success 125 | notFound: false, 126 | }; 127 | 128 | this.props.bridge.on("ready", (version) => { 129 | console.log("received ready!"); 130 | this.setState({ version, notFound: false }); 131 | this.props.bridge.send("panel:ready", "ready"); 132 | }); 133 | 134 | this.props.bridge.on("broadcast:new", (_data) => { 135 | console.log("panel received broadcast:new", _data); 136 | const data = _data; 137 | console.log("parsed data", data); 138 | if (data.counter) this.props.bridge.send("broadcast:ack", data.counter); 139 | this.setState(({ tabData }) => ({ 140 | tabData: Object.assign({}, tabData, data), 141 | notFound: false, 142 | })); 143 | }); 144 | } 145 | 146 | componentDidMount() { 147 | this._timeout = setTimeout(() => { 148 | if (this.state.version) return; 149 | this.setState({ notFound: true }); 150 | }, 10000); 151 | } 152 | 153 | componentWillUnmount() { 154 | clearTimeout(this._timeout); 155 | } 156 | 157 | onRun = (queryString, variables, tab, automaticallyRunQuery) => { 158 | this.setState({ 159 | active: "graphiql", 160 | runQuery: queryString, 161 | runVariables: variables ? JSON.stringify(variables, null, 2) : "", 162 | automaticallyRunQuery, 163 | }); 164 | }; 165 | 166 | switchPane = (pane) => { 167 | this.setState({ 168 | active: pane, 169 | // Don't leave this stuff around except when actively clicking the run 170 | // button. 171 | runQuery: undefined, 172 | runVariables: undefined, 173 | }); 174 | }; 175 | 176 | render() { 177 | const { active, tabData, version, notFound } = this.state; 178 | if (notFound) return ; 179 | if (!version) return ; 180 | if (Number(version[0]) === 1) return ; 181 | let body; 182 | switch (active) { 183 | case "queries": 184 | // XXX this won't work in the dev tools (probably does work now) 185 | //body = ; 186 | body =
Watch queries
; 187 | break; 188 | case "mutations": 189 | // XXX this won't work in the dev tools (probably does work now) 190 | // body = ; 191 | body =
Mutations
; 192 | break; 193 | case "store": 194 | // body =
Inspect
; 195 | body = ; 196 | break; 197 | case "graphiql": 198 | // body = ( 199 | // 205 | // ); 206 | body =
GraphiQL
; 207 | break; 208 | default: 209 | break; 210 | } 211 | 212 | return ( 213 | 214 | 215 | 216 | 217 | 218 | this.switchPane("graphiql")} 222 | > 223 | 224 |

GraphiQL

225 | 226 | this.switchPane("queries")} 230 | > 231 | 232 |

Queries

233 | 234 | this.switchPane("mutations")} 238 | > 239 | 240 |

Mutations

241 | 242 | this.switchPane("store")} 246 | > 247 | 248 |

Cache

249 | 250 | 251 | {/*
Body!
*/} 252 | {body} 253 | 254 | ); 255 | } 256 | } 257 | 258 | const ClientPanel = styled.div({ 259 | display: "flex", 260 | height: "100%", 261 | width: "100%", 262 | }); 263 | 264 | const SideBar = styled.div({ 265 | backgroundImage: 266 | "linear-gradient(\n 179deg,\n #2c2f39 2%,\n #363944 14%,\n #32353d 100%\n )", 267 | color: '"#fff"', 268 | flex: "none", 269 | textAlign: "center", 270 | width: "55px", 271 | position: "relative", 272 | overflowX: "hidden", 273 | }); 274 | 275 | const LogoTab = styled.div({ 276 | backgroundImage: 277 | "linear-gradient(\n 179deg,\n #2c2f39 2%,\n #363944 14%,\n #32353d 100%\n )", 278 | color: '"#fff"', 279 | flex: "none", 280 | textAlign: "center", 281 | width: "55px", 282 | overflowY: "auto", 283 | backgroundColor: "#21232b", 284 | cursor: "default", 285 | fontSize: "0", 286 | }); 287 | 288 | const Tab = styled.div( 289 | { 290 | backgroundImage: 291 | "linear-gradient(\n 179deg,\n #2c2f39 2%,\n #363944 14%,\n #32353d 100%\n )", 292 | flex: "none", 293 | textAlign: "center", 294 | width: "55px", 295 | overflowY: "auto", 296 | cursor: "pointer", 297 | fontSize: "8px", 298 | padding: "8px", 299 | "&:hover": { 300 | textDecoration: "underline", 301 | color: "rgba(255, 255, 255, 0.8)", 302 | }, 303 | }, 304 | (props) => ({ 305 | color: props.active ? "#2bd0c0" : "#fff", 306 | }) 307 | ); 308 | -------------------------------------------------------------------------------- /packages/flipper-plugin-apollo-client-devtools/src/devtools/components/Sidebar.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { StorageContext } from "../context/StorageContext"; 3 | import styled from "@emotion/styled"; 4 | 5 | export class Sidebar extends Component { 6 | static contextType = StorageContext; 7 | 8 | constructor(props, context) { 9 | super(props, context); 10 | 11 | this.initResize = this.initResize.bind(this); 12 | this.Resize = this.Resize.bind(this); 13 | this.stopResize = this.stopResize.bind(this); 14 | } 15 | 16 | componentDidMount() { 17 | const savedWidth = this.context.storage.getItem( 18 | `apollo-client:${this.props.name}` 19 | ); 20 | // if (savedWidth) this.sidebar.style.width = `${savedWidth}px`; 21 | } 22 | 23 | initResize(e) { 24 | window.addEventListener("mousemove", this.Resize, false); 25 | window.addEventListener("mouseup", this.stopResize, false); 26 | } 27 | 28 | Resize(e) { 29 | const rect = e.target.getBoundingClientRect(); 30 | console.log("rect X: ", rect.x); 31 | console.log("clientX", e.clientX); 32 | console.log("offsetLeft: ", this.sidebar.offsetLeft); 33 | // console.log("offsetParent: ", this.sidebar.offsetParent.offsetLeft); 34 | // console.log("offsetParent: ", this.sidebar.offsetParent.offsetWidth); 35 | // console.log("offsetWidth: ", this.sidebar.offsetWidth); 36 | // console.log(e.pageX - e.clientX - this.sidebar.offsetLeft); 37 | const width = e.clientX - this.sidebar.offsetLeft - rect.x; 38 | console.log("width: ", width); 39 | this.context.storage.setItem(`apollo-client:${this.props.name}`, width); 40 | this.sidebar.style.width = `${width}px`; 41 | window.getSelection().removeAllRanges(); 42 | } 43 | 44 | stopResize(e) { 45 | window.removeEventListener("mousemove", this.Resize, false); 46 | window.removeEventListener("mouseup", this.stopResize, false); 47 | } 48 | 49 | render() { 50 | const { children } = this.props; 51 | return ( 52 | { 54 | this.sidebar = sidebar; 55 | }} 56 | > 57 | 58 | {children} 59 | 60 | ); 61 | } 62 | } 63 | 64 | const SidebarDiv = styled.div({ 65 | backgroundImage: 66 | "linear-gradient(\n 179deg,\n #2c2f39 2%,\n #363944 14%,\n #32353d 100%\n )", 67 | color: '"#fff"', 68 | flex: "none", 69 | textAlign: "center", 70 | width: "55px", 71 | position: "relative", 72 | overflowX: "hidden", 73 | }); 74 | 75 | const Dragger = styled.div({ 76 | position: "absolute", 77 | height: "100%", 78 | width: "4px", 79 | right: "0", 80 | cursor: "ew-resize", 81 | backgroundColor: "transparent", 82 | }); 83 | -------------------------------------------------------------------------------- /packages/flipper-plugin-apollo-client-devtools/src/devtools/components/bridge/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component, Children } from "react"; 2 | import PropTypes from "prop-types"; 3 | 4 | export const BridgeConsumer = (props, context) => 5 | props.children(context.bridge); 6 | 7 | BridgeConsumer.contextTypes = { 8 | bridge: PropTypes.object.isRequired, 9 | }; 10 | 11 | export const withBridge = Component => props => ( 12 | 13 | {bridge => } 14 | 15 | ); 16 | 17 | export class BridgeProvider extends Component { 18 | static propTypes = { 19 | bridge: PropTypes.object.isRequired, 20 | children: PropTypes.element.isRequired, 21 | }; 22 | 23 | static childContextTypes = { 24 | bridge: PropTypes.object.isRequired, 25 | }; 26 | 27 | getChildContext() { 28 | return { 29 | bridge: this.props.bridge, 30 | }; 31 | } 32 | 33 | render() { 34 | return Children.only(this.props.children); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /packages/flipper-plugin-apollo-client-devtools/src/devtools/context/StorageContext.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const StorageContext = React.createContext({ 4 | storage: null, 5 | }); 6 | -------------------------------------------------------------------------------- /packages/flipper-plugin-apollo-client-devtools/src/devtools/context/StorageContextProvider.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-unused-state */ 2 | import React from "react"; 3 | import PropTypes from "prop-types"; 4 | import { StorageContext } from "./StorageContext"; 5 | 6 | export class StorageContextProvider extends React.PureComponent { 7 | state = { 8 | storage: this.props.storage, 9 | }; 10 | 11 | render() { 12 | return ( 13 | 14 | {this.props.children} 15 | 16 | ); 17 | } 18 | } 19 | 20 | StorageContextProvider.propTypes = { 21 | storage: PropTypes.object.isRequired, 22 | }; 23 | -------------------------------------------------------------------------------- /packages/flipper-plugin-apollo-client-devtools/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FlipperPlugin, View, KeyboardActions } from "flipper"; 3 | import { App } from "./App"; 4 | 5 | type State = {}; 6 | 7 | type Data = { 8 | counter: number; 9 | queries: object; 10 | mutations: object; 11 | inspector: object; 12 | }; 13 | 14 | type PersistedState = { 15 | data: Data; 16 | }; 17 | 18 | const initialData = { counter: 0, queries: {}, mutations: {}, inspector: {} }; 19 | 20 | export default class extends FlipperPlugin { 21 | static keyboardActions: KeyboardActions = ["clear"]; 22 | 23 | static defaultPersistedState: PersistedState = { 24 | data: initialData, 25 | }; 26 | 27 | static persistedStateReducer = ( 28 | persistedState: PersistedState, 29 | method: string, 30 | data: Data 31 | ): PersistedState => { 32 | return { 33 | ...persistedState, 34 | data, 35 | }; 36 | }; 37 | 38 | state = {}; 39 | 40 | onKeyboardAction = (action: string) => { 41 | if (action === "clear") { 42 | this.props.setPersistedState({ data: initialData }); 43 | } 44 | }; 45 | 46 | render() { 47 | return ( 48 | 49 | 50 | 51 | ); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /packages/flipper-plugin-apollo-client-devtools/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "target": "ES2017", 5 | "module": "ES6", 6 | "jsx": "react", 7 | "sourceMap": true, 8 | "noEmit": true, 9 | "strict": true, 10 | "moduleResolution": "node", 11 | "allowJs": true, 12 | "esModuleInterop": true, 13 | "forceConsistentCasingInFileNames": true 14 | }, 15 | "files": ["src/index.tsx"] 16 | } 17 | -------------------------------------------------------------------------------- /packages/react-native-flipper-apollo-devtools/.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .DS_Store 3 | node_modules 4 | dist 5 | -------------------------------------------------------------------------------- /packages/react-native-flipper-apollo-devtools/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Juha Linnanen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /packages/react-native-flipper-apollo-devtools/README.md: -------------------------------------------------------------------------------- 1 | ## React Native -package to connect Flipper Apollo Client devtools 2 | 3 | ### Installation guide 4 | 5 | 1. `npm install --save react-native-flipper-apollo-devtools` 6 | 2. Connect your React Native project to flipper plugin in your code: 7 | 8 | ``` 9 | import { enableFlipperApolloDevtools } from 'react-native-flipper-apollo-devtools' 10 | 11 | ... 12 | 13 | enableFlipperApolloDevtools(apolloClient) 14 | 15 | ``` 16 | 17 | 3. [Install Apollo Client devtools flipper plugin in flipper](../flipper-plugin-apollo-client-devtools) 18 | 4. Run your app and see Apollo Devtools plugin in the left pane of Flipper 19 | 5. Enable the plugin and go to the pane to see the devtools 20 | 21 | ## Experimental 22 | 23 | Note that currently this is an experimental alpha release and does not have 24 | all the Apollo Client devtools functionality included. Cache tab should 25 | be mostly working, but rest are placeholders. Contributions are welcome! 26 | -------------------------------------------------------------------------------- /packages/react-native-flipper-apollo-devtools/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-flipper-apollo-devtools", 3 | "author": "Juha Linnanen", 4 | "version": "0.0.1", 5 | "license": "MIT", 6 | "module": "dist/react-native-flipper-apollo-devtools.esm.js", 7 | "main": "dist/index.js", 8 | "typings": "dist/index.d.ts", 9 | "files": [ 10 | "dist", 11 | "src" 12 | ], 13 | "scripts": { 14 | "start": "tsdx watch", 15 | "build": "tsdx build", 16 | "test": "tsdx test --passWithNoTests", 17 | "lint": "tsdx lint", 18 | "prepare": "tsdx build", 19 | "prepublishOnly": "npm build" 20 | }, 21 | "peerDependencies": { 22 | "react-native-flipper": "^0.61.0" 23 | }, 24 | "devDependencies": { 25 | "husky": "^4.3.0", 26 | "react-native-flipper": "^0.61.0", 27 | "tsdx": "^0.14.0", 28 | "tslib": "^2.0.3", 29 | "typescript": "^4.0.3" 30 | }, 31 | "husky": { 32 | "hooks": { 33 | "pre-commit": "tsdx lint" 34 | } 35 | }, 36 | "prettier": { 37 | "printWidth": 100, 38 | "semi": false, 39 | "singleQuote": true, 40 | "trailingComma": "es5" 41 | }, 42 | "dependencies": { 43 | "@apollo/client": "^3.2.3" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /packages/react-native-flipper-apollo-devtools/src/enableApolloDevtools.ts: -------------------------------------------------------------------------------- 1 | import { addPlugin, Flipper } from 'react-native-flipper' 2 | import { ApolloClient, NormalizedCache, NormalizedCacheObject } from '@apollo/client' 3 | 4 | type ApolloDevtoolCallbackParams = { 5 | state: any 6 | dataWithOptimisticResults: any 7 | } 8 | 9 | type ApolloDevClient = Omit, '__actionHookForDevTools'> & { 10 | __actionHookForDevTools: (params: (arg0: ApolloDevtoolCallbackParams) => any) => void 11 | } 12 | 13 | let currentConnection: Flipper.FlipperConnection | null = null 14 | let client: ApolloDevClient | null = null 15 | export const enableFlipperApolloDevtools = ( 16 | newClient: ApolloDevClient 17 | ) => { 18 | if (client !== newClient) { 19 | client = newClient 20 | 21 | let counter = 0 22 | let enqueued = null 23 | const logger = ({ 24 | state: { queries, mutations }, 25 | dataWithOptimisticResults: inspector, 26 | }: ApolloDevtoolCallbackParams) => { 27 | counter++ 28 | enqueued = { 29 | counter, 30 | queries, 31 | mutations, 32 | inspector, 33 | } 34 | if (currentConnection !== null) { 35 | currentConnection.send('broadcast:new', enqueued) 36 | } 37 | } 38 | client.__actionHookForDevTools(logger) 39 | } 40 | if (currentConnection === null) { 41 | addPlugin({ 42 | getId() { 43 | return 'apollo-client-devtools' 44 | }, 45 | onConnect(connection) { 46 | currentConnection = connection 47 | }, 48 | onDisconnect() { 49 | currentConnection = null 50 | }, 51 | runInBackground() { 52 | return false 53 | }, 54 | }) 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /packages/react-native-flipper-apollo-devtools/src/index.ts: -------------------------------------------------------------------------------- 1 | export { enableFlipperApolloDevtools } from './enableApolloDevtools' 2 | -------------------------------------------------------------------------------- /packages/react-native-flipper-apollo-devtools/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "module": "esnext", 6 | "lib": ["dom", "esnext"], 7 | "importHelpers": true, 8 | "declaration": true, 9 | "sourceMap": true, 10 | "rootDir": "./src", 11 | "strict": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true, 14 | "noImplicitReturns": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "moduleResolution": "node", 17 | "baseUrl": "./", 18 | "paths": { 19 | "*": ["src/*", "node_modules/*"] 20 | }, 21 | "jsx": "react", 22 | "esModuleInterop": true 23 | } 24 | } 25 | --------------------------------------------------------------------------------