](https://www.npmjs.com/package/react-native-apollo-devtools-client)
4 |
5 |
6 | [Flipper](https://github.com/facebook/flipper) plugin to visualise [apollo client](https://github.com/apollographql/apollo-client) cache, queries and mutations for React Native.
7 |
8 | This plugin offers feature parity with the official devtool for React Native since the [official apollo client devtool](https://github.com/apollographql/apollo-client-devtools) only supports web platform and does not supports React Native.
9 |
10 | Read more about it in our blog post [here](https://engineering.razorpay.com/apollo-client-devtools-for-flipper-bc5337b3a411).
11 |
12 | 
13 |
14 | ###### *Devtools in action with the Ricky and Morty GraphQL API based react native [sample app](https://github.com/HarrisonHenri/rick-morty-react-native-shop)*
15 |
16 | {block?.blockValue?.trim()}
33 |
41 | {"id":"secondID"}
42 |
43 | `);
44 | });
45 |
--------------------------------------------------------------------------------
/packages/flipper-plugin-react-native-apollo-devtools/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { Layout, message } from "antd";
2 | import { PluginClient, createState, usePlugin, useValue } from "flipper-plugin";
3 | import React, { useState } from "react";
4 | import { Details } from "./Details";
5 | import { Header } from "./Header";
6 | import { List, TabsEnum } from "./List";
7 | import { BlockType, Data, Events } from "./typings";
8 | import {
9 | createCacheBlock,
10 | createMutationBlocks,
11 | createQueryBlocks,
12 | } from "./utils";
13 |
14 | const { Content } = Layout;
15 | const InitialData = {
16 | id: "x",
17 | lastUpdateAt: new Date(),
18 | queries: [],
19 | mutations: [],
20 | cache: [],
21 | };
22 |
23 | let timer: NodeJS.Timeout;
24 |
25 | function debounce(func: (...args: any) => any, timeout = 7000): void {
26 | clearTimeout(timer);
27 | timer = setTimeout(() => {
28 | // @ts-expect-error add typings for this
29 | func.apply(this);
30 | }, timeout);
31 | }
32 |
33 | export function plugin(client: PluginClient