plrdev / react-native-flipper-apollo-devtools Goto Github PK

View Code? Open in Web Editor NEW

33.0 33.0 7.0 269 KB

TypeScript 15.11% JavaScript 84.89%

react-native-flipper-apollo-devtools's People

Contributors

Stargazers

Watchers

Forkers

mikepodgorniy pontusab anagovitsyn greenteamer cavallando levelshealth dancixx

react-native-flipper-apollo-devtools's Issues

Apollo Client DevTools 3.0 released

I believe this is based on the official devtools, which just released 3.0: https://github.com/apollographql/apollo-client-devtools

how do I run this?

would much appreciate some installation / run steps

Dist folder is still empty v0.0.1

Hey and thanks for all your efforts!

Dist folder is still empty after installation package.

Seems that you haven't built project before publish to npm. I would recommend you to add additional script to packaje.json file: "prepublishOnly": "npm run build" and publish project again.

Also, I would recommend you to update a few lines in README.md file.

We can save react-native-flipper-apollo-devtools for our projects as dev dependency (npm install --save-dev react-native-flipper-apollo-devtools);
So, as we don't need it on production, we can import and enable apollo devtools for flipper like so:

Migrate GraphiQL tab styling from less to Emotion

Apollo client devtools uses LESS for stylings, which is not supported for Flipper plugin. Flipper plugin supports Emotion, so styles needs to be migrated. This was done already for Cache tab. It can be used as an example how this can be achieved. Goal is to have the GraphiQL Tab UI look like it looks in Chrome devtools. No need to wire up the functionality - just get the UI working.

Migrate Queries tab styling from less to Emotion

Apollo client devtools uses LESS for stylings, which is not supported for Flipper plugin. Flipper plugin supports Emotion, so styles needs to be migrated. This was done already for Cache tab. It can be used as an example how this can be achieved. Goal is to have the Query Tab UI look like it looks in Chrome devtools. No need to wire up the functionality - just get the UI working.

Flipper upgrades

After upgrading fllipper, cache stoped displaying

react-native-flipper-apollo-devtools, dist folder is empty v0.0.1

"react-native-flipper-apollo-devtools": "0.0.1",

➜ react-native-flipper-apollo-devtools git:(develop) ✗ ls -la
total 16
drwxr-xr-x 6 mike staff 192 7 сен 11:01 .
drwxr-xr-x 1415 mike staff 45280 7 сен 11:53 ..
-rw-r--r-- 1 mike staff 1070 7 сен 10:41 LICENSE
drwxr-xr-x 3 mike staff 96 7 сен 11:01 dist
-rw-r--r-- 1 mike staff 930 7 сен 10:41 package.json
drwxr-xr-x 3 mike staff 96 7 сен 11:01 src

➜ dist git:(develop) ✗ ls -la
total 8
drwxr-xr-x 3 mike staff 96 7 сен 11:01 .
drwxr-xr-x 6 mike staff 192 7 сен 11:01 ..
-rw-r--r-- 1 mike staff 250 7 сен 10:41 index.js

Migrate mutation tab styling from less to Emotion

Apollo client devtools uses LESS for stylings, which is not supported for Flipper plugin. Flipper plugin supports Emotion, so styles needs to be migrated. This was done already for Cache tab. It can be used as an example how this can be achieved. Goal is to have the Mutations Tab UI look like it looks in Chrome devtools. No need to wire up the functionality - just get the UI working.

0.0.2 does not work

Hello, i am unable to run 0.0.2 version with my current libs:

error:

 Error: Unable to resolve module react-native-flipper from /Users/USER/Documents/GitHub/PROJECT_NAME/node_modules/react-native-flipper-apollo-devtools/dist/react-native-flipper-apollo-devtools.cjs.production.min.js: react-native-flipper could not be found within the project or in these directories:
  node_modules/react-native-flipper-apollo-devtools/node_modules
  node_modules

package.json:

 "dependencies": {
   "@apollo/client": "3.4.17",
   "@babel/plugin-proposal-decorators": "^7.17.9",
   "@gorhom/bottom-sheet": "^4",
   "@onfido/react-native-sdk": "^5.2.0",
   "@react-native-community/clipboard": "^1.5.1",
   "@react-native-community/datetimepicker": "^6.1.3",
   "@react-native-firebase/app": "^14.5.1",
   "@react-native-firebase/messaging": "^14.5.1",
   "@react-navigation/bottom-tabs": "^6.3.1",
   "@react-navigation/native": "^6.0.10",
   "@react-navigation/native-stack": "^6.6.1",
   "@sentry/react-native": "^4.1.0",
   "dayjs": "^1.11.2",
   "formik": "^2.2.9",
   "graphql": "^15.0.0",
   "graphql-tag-pluck": "^0.8.7",
   "hermes-engine": "0.11.0",
   "i18next": "^21.6.16",
   "libphonenumber-js": "^1.9.51",
   "lodash": "^4.17.21",
   "mobx": "^6.5.0",
   "mobx-react": "^7.3.0",
   "mobx-utils": "^6.0.5",
   "prettier": "^2.6.2",
   "react": "17.0.2",
   "react-i18next": "^11.16.7",
   "react-native": "0.67.4",
   "react-native-appsflyer": "^6.6.1",
   "react-native-charts-wrapper": "^0.5.8",
   "react-native-code-push": "^7.0.5",
   "react-native-confirmation-code-field": "^7.3.0",
   "react-native-country-picker-modal": "^2.0.0",
   "react-native-device-info": "^10.0.2",
   "react-native-dotenv": "^3.3.1",
   "react-native-fast-image": "^8.5.11",
   "react-native-flash-message": "^0.2.1",
   "react-native-flipper-apollo-devtools": "^0.0.2",
   "react-native-gesture-handler": "^2.4.2",
   "react-native-haptic-feedback": "^1.13.1",
   "react-native-keyboard-manager": "^6.5.4-4",
   "react-native-keychain": "^8.0.0",
   "react-native-linear-gradient": "^2.5.6",
   "react-native-localize": "^2.2.1",
   "react-native-mask-input": "^1.2.0",
   "react-native-mmkv": "^2.3.2",
   "react-native-modal": "^13.0.1",
   "react-native-phone-number-input": "^2.1.0",
   "react-native-plaid-link-sdk": "^7.4.0",
   "react-native-reanimated": "^2.8.0",
   "react-native-safe-area-context": "^4.2.4",
   "react-native-screens": "^3.13.1",
   "react-native-sms-retriever": "^1.1.1",
   "react-native-svg": "^12.3.0",
   "react-native-webview": "^11.22.3",
   "react-phone-number-input": "^3.1.50",
   "react-use-websocket": "3.0.0",
   "rn-placeholder": "^3.0.3",
   "yarn": "^1.22.18",
   "yup": "^0.32.11",
   "yup-phone": "^1.3.2"
 },
 "devDependencies": {
   "@babel/core": "^7.12.9",
   "@babel/runtime": "^7.12.5",
   "@graphql-codegen/cli": "^2.6.2",
   "@graphql-codegen/named-operations-object": "^2.2.1",
   "@graphql-codegen/typescript": "^2.4.8",
   "@graphql-codegen/typescript-operations": "^2.3.5",
   "@graphql-codegen/typescript-react-apollo": "^3.2.14",
   "@react-native-community/eslint-config": "^2.0.0",
   "@types/jest": "^26.0.23",
   "@types/react-native": "^0.67.3",
   "@types/react-native-charts-wrapper": "^0.5.2",
   "@types/react-test-renderer": "^17.0.1",
   "@typescript-eslint/eslint-plugin": "^5.17.0",
   "@typescript-eslint/parser": "^5.17.0",
   "babel-jest": "^26.6.3",
   "eslint": "^8.2.0",
   "eslint-config-airbnb": "19.0.4",
   "eslint-config-airbnb-base": "^15.0.0",
   "eslint-plugin-import": "^2.25.3",
   "eslint-plugin-react": "^7.28.0",
   "eslint-plugin-react-hooks": "^4.3.0",
   "husky": "^7.0.0",
   "i18next-scanner": "^3.1.0",
   "i18next-scanner-typescript": "^1.0.6",
   "jest": "^26.6.3",
   "lint-staged": ">=10",
   "metro-react-native-babel-preset": "^0.66.2",
   "react-test-renderer": "17.0.2",
   "standard-version": "^9.5.0",
   "typescript": "^4.4.4"
 },
 "resolutions": {
   "@types/react": "^17"
 },
 "jest": {
   "preset": "react-native",
   "moduleFileExtensions": [
     "ts",
     "tsx",
     "js",
     "jsx",
     "json",
     "node"
   ]
 },
 "lint-staged": {
   "*.{js,jsx,ts,tsx}": "eslint --cache --fix"
 }
}

Steps to repro:
yarn add --save react-native-flipper-apollo-devtools
npx pod-install ios
yarn start --reset-cache
yarn ios
error occurs on app launch

is it a version mismatch?

Can you post some screenshots / improve the getting started guide?

I believe that I have done all of the install steps correctly, including selecting apollo-flipper-plugin from the managed plugin list in flipper, however I don't see the plugin in the sidebar.

Perhaps you can post some screenshots of what this plugin looks like / what I should be looking for?

Am I suppose to pass the ApolloClient imported from `@apollo-client` module?

I'm trying to use this plugin in my code base like this:

import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client";
import RNAsyncStorageFlipper from "rn-async-storage-flipper";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { enableFlipperApolloDevtools } from "react-native-flipper-apollo-devtools";


const App: React.FC = () => {
  RNAsyncStorageFlipper(AsyncStorage);
  enableFlipperApolloDevtools(ApolloClient);

  return (
    <ApolloProvider client={client}>
      <RecoilRoot>
        <NavigationContainer />
      </RecoilRoot>
    </ApolloProvider>
  );
};

export default App;

but typescript blames about it:

TS2345: Argument of type 'typeof ApolloClient' is not assignable to parameter of type 'ApolloDevClient<NormalizedCache | NormalizedCacheObject>'.   Type 'typeof ApolloClient' is missing the following properties from type 'Omit<ApolloClient<NormalizedCache | NormalizedCacheObject>, "__actionHookForDevTools">': query, link, cache, disableNetworkFetches, and 27 more.

What is the simple way of using this plugin? Any Ideas would be appreciated ;)

plrdev / react-native-flipper-apollo-devtools Goto Github PK

react-native-flipper-apollo-devtools's People

Contributors

Stargazers

Watchers

Forkers

react-native-flipper-apollo-devtools's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs