react-native-flipper-apollo-devtools's People
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.
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
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.
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.
how do I run this?
would much appreciate some installation / run steps
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
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.