GithubHelp home page GithubHelp logo

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

Contributors

mikepodgorniy avatar plrdev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

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

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?

Dist folder is still empty v0.0.1

Hey and thanks for all your efforts!

Dist folder is still empty after installation package.
Screenshot 2020-10-01 at 19 02 14

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.

  1. We can save react-native-flipper-apollo-devtools for our projects as dev dependency (npm install --save-dev react-native-flipper-apollo-devtools);
  2. So, as we don't need it on production, we can import and enable apollo devtools for flipper like so:
    Screenshot 2020-10-01 at 18 41 48

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.

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.

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 ;)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.