- The error that occured yesterday is still occuring today.
- I've decided it's time to read up on Apollo Link to figure out what the hell is going on in this document.
- But before I do that, I want to revert my changes on the apollo-client-singleton file to see if I can slowly re-activate this error and identify where it breaks and why.
- When I reverted the apollo-client-singleton file as it was before. I get the following error:
UserMenu.jsx:214 Uncaught TypeError: lodash__WEBPACK_IMPORTED_MODULE_10__.flowRight.flowRight is not a function- I know exactly when this occured while I updated the UserMenu.jsx. Let's go fix that error now!
- Okay, now lodash is expecting a function. Lodash was an addition that Daniel and I decided to incorporate to replace
react-apollo. Maybe instead of downloading a seperate dependency (even though it's supposed to be the same methods just packaged in a new package.) I should look at how to correctly integrate this lodash function. It looks like it breaks inUserMenu.jsxfirst, thenTopNav.jsx, and thenAdminDashboard.jsx. So Lodash is far reaching and if I can load it up correctly here, it will function correctly in the rest of these files. - Because this is breaking first at
UserMenu.jsx, that is letting me know that our import is what is causing this breaking change. - I now need to look into what would be the best way forward in terms of integrating
lodashbut replacingreact-apollo - Here is a document that holds all the coding files that import Lodash
lodash.js:5145 Uncaught TypeError: Expected a function
at lodash.js:5145:1
at apply (lodash.js:488:1)
at lodash.js:6627:1
at ./src/containers/UserMenu.jsx (UserMenu.jsx:214:23)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./src/components/TopNav.jsx (TexterStats.jsx:123:27)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./src/components/AdminDashboard.jsx (SortBy.jsx:92:22)`
BEFORE
import fetch from "isomorphic-fetch";
import { ApolloClient } from "apollo-client";
import { ApolloLink } from "apollo-link";
import { createHttpLink } from "apollo-link-http";
import { onError } from "apollo-link-error";
import { InMemoryCache } from "apollo-cache-inmemory";
import { getMainDefinition } from "apollo-utilities";
import omitDeep from "omit-deep-lodash";
const httpLink = createHttpLink({DESIRED GOAL FOR AFTER
// import fetch from "isomorphic-fetch";
// import { ApolloClient, ApolloLink, HttpLink } from "@apollo/client";
// import { onError } from "@apollo/client/link/error";
// import { InMemoryCache } from '@apollo/client/cache';
// import { getMainDefinition } from "@apollo/client/utilities";
// import omitDeep from "omit-deep-lodash";
// const httpLink = HttpLink({core.cjs:21 Uncaught TypeError: Cannot set properties of undefined (setting 'request')
This is the trace of this error:
at ApolloLink (core.cjs:21:1)
at HttpLink (http.cjs:615:1)
at ./src/network/apollo-client-singleton.js (apollo-client-singleton.js:8:26)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./src/containers/hoc/load-data.jsx (ThemeContext.js:5:23)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./src/containers/UserMenu.jsx (UserEdit.jsx:516:24)
at __webpack_require__ (bootstrap:24:1)
- Mad at graphql
- https://github.com/graphql/graphql-js/tags?after=v14.2.0
- apollo-client is at 2.6.4 current version 3.8.8 apollo-client changelog
warning "apollo-server-express > [email protected]" has incorrect peer dependency "graphql@^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0".
warning "apollo-server-express > apollo-server-core > [email protected]" has incorrect peer dependency "[email protected] - 0.13.x".
warning "apollo-server-express > apollo-server-core > [email protected]" has incorrect peer dependency "[email protected] - 0.13.x".
warning "apollo-server-express > apollo-server-core > [email protected]" has incorrect peer dependency "[email protected] - 0.13.x".
- React-Apollo
- Apollo Client Tags
- apollo-link-batch is now @apollo/client/link/batch apollo-link-batch-http is now @apollo/client/link/batch-http apollo-link-context is now @apollo/client/link/context apollo-link-error is now @apollo/client/link/error apollo-link-retry is now @apollo/client/link/retry apollo-link-schema is now @apollo/client/link/schema apollo-link-ws is now @apollo/client/link/ws
npm WARN deprecated [email protected]: Use your platform's native DOMException instead
npm WARN deprecated [email protected]: The `apollo-tracing` package is no longer part of Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#tracing for details
npm WARN deprecated [email protected]: Please upgrade to latest, formidable@v2 or formidable@v3! Check these notes: https://bit.ly/2ZEqIau
npm WARN deprecated [email protected]: The `graphql-extensions` API has been removed from Apollo Server 3. Use the plugin API instead: https://www.apollographql.com/docs/apollo-server/integrations/plugins/
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: The functionality provided by the `apollo-cache-control` package is built in to `apollo-server-core` starting with Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#cachecontrol for details.
npm WARN deprecated [email protected]: The `apollo-server-core` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated [email protected]: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated [email protected]: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js
npm ls core-js
├─┬ [email protected]
│ └─┬ [email protected]
│ └─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ └── [email protected]
├── [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│ └─┬ @babel/[email protected]
│ └── [email protected]
└─┬ [email protected]
└── [email protected]
warning "apollo-server-express > [email protected]" has incorrect peer dependency "graphql@^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0".
warning "apollo-server-express > apollo-server-core > [email protected]" has incorrect peer dependency "[email protected] - 0.13.x".
warning "apollo-server-express > apollo-server-core > [email protected]" has incorrect peer dependency "[email protected] - 0.13.x".
warning "apollo-server-express > apollo-server-core > [email protected]" has incorrect peer dependency "[email protected] - 0.13.x".
- Following this tutorial on Reach Hooks Compose
- Was looking for an alternative because of the 35 files that needed to be updated in order to successfully remove our prodcut away from Recompose.
- I liked this because the syntax was similar, and I was hoping to be able to continue to use our
withMUIThemeandwithRoutermodules that are so critical to our codebase. - If this dependency can buy us time to refactor into ReactHooks in 2024, than it will be worth the breathing room to deliver the Nodejs20.10.0 upgrade to Spoke.
- I imported the Here is the AssignmentSummary.jsx
- I'm getting a type error:
withRouter.js:32 Uncaught TypeError: Cannot read properties of undefined (reading 'displayName') - Got my first useful error:
- The entries below allowed me to see that our graphql update could only go to 15, and not 16.18.1
> npm install react-apollo
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/graphql
npm ERR! graphql@"^0.13.2" from the root project
npm ERR! peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm ERR! node_modules/apollo-client
npm ERR! apollo-client@"^2.6.10" from the root project
npm ERR! peer apollo-client@"^2.6.4" from [email protected]
npm ERR! node_modules/react-apollo
npm ERR! react-apollo@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer graphql@"^14.3.1" from [email protected]
npm ERR! node_modules/react-apollo
npm ERR! react-apollo@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
- ran >
npm install --save [email protected]and got:
> npm install --save [email protected]
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/graphql
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN node_modules/apollo-cache
npm WARN apollo-cache@"^1.3.5" from [email protected]
npm WARN node_modules/apollo-cache-inmemory
npm WARN 16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN node_modules/apollo-cache-inmemory
npm WARN apollo-cache-inmemory@"^1.6.6" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/graphql
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN node_modules/apollo-cache
npm WARN apollo-cache@"^1.3.5" from [email protected]
npm WARN node_modules/apollo-cache-inmemory
npm WARN 16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0" from [email protected]
npm WARN node_modules/apollo-client
npm WARN apollo-client@"^2.6.4" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/graphql
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN node_modules/apollo-cache
npm WARN apollo-cache@"^1.3.5" from [email protected]
npm WARN node_modules/apollo-cache-inmemory
npm WARN 16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.3 || ^0.12.3 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN node_modules/apollo-link
npm WARN apollo-link@"^1.0.0" from [email protected]
npm WARN node_modules/apollo-client
npm WARN 5 more (apollo-link-error, apollo-link-http, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/graphql
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN node_modules/apollo-cache
npm WARN apollo-cache@"^1.3.5" from [email protected]
npm WARN node_modules/apollo-cache-inmemory
npm WARN 16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN node_modules/apollo-link-http
npm WARN apollo-link-http@"^1.5.17" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/graphql
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN node_modules/apollo-cache
npm WARN apollo-cache@"^1.3.5" from [email protected]
npm WARN node_modules/apollo-cache-inmemory
npm WARN 16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN node_modules/apollo-utilities
npm WARN apollo-utilities@"^1.3.4" from [email protected]
npm WARN node_modules/apollo-cache
npm WARN 4 more (apollo-cache-inmemory, apollo-link, graphql-tools, the root project)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/graphql
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN node_modules/apollo-cache
npm WARN apollo-cache@"^1.3.5" from [email protected]
npm WARN node_modules/apollo-cache-inmemory
npm WARN 16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@">=0.5.0" from [email protected]
npm WARN node_modules/graphql-date
npm WARN graphql-date@"^1.0.3" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/graphql
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN node_modules/apollo-cache
npm WARN apollo-cache@"^1.3.5" from [email protected]
npm WARN node_modules/apollo-cache-inmemory
npm WARN 16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" from [email protected]
npm WARN node_modules/graphql-tag
npm WARN graphql-tag@"^2.10.3" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/graphql
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN node_modules/apollo-cache
npm WARN apollo-cache@"^1.3.5" from [email protected]
npm WARN node_modules/apollo-cache-inmemory
npm WARN 16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0" from [email protected]
npm WARN node_modules/graphql-tools
npm WARN graphql-tools@"^2.8.0" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/graphql
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN node_modules/apollo-cache
npm WARN apollo-cache@"^1.3.5" from [email protected]
npm WARN node_modules/apollo-cache-inmemory
npm WARN 16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@">=0.8.0" from [email protected]
npm WARN node_modules/graphql-type-json
npm WARN graphql-type-json@"^0.3.2" from the root project
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: graphql@undefined
npm ERR! node_modules/graphql
npm ERR! graphql@"16.18.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer graphql@"^0.11.3 || ^0.12.3 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm ERR! node_modules/apollo-link
npm ERR! apollo-link@"^1.2.14" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/ariqueaguilar/.npm/_logs/2023-12-08T19_17_02_975Z-eresolve-report.txt
- ran
npm ls graphql├─┬ [email protected] (UP TO DATE!) │ ├─┬ [email protected] (APOLLO CACHE IS UP TO DATE!) │ │ └── [email protected] deduped (this is so old, I can't even look at it!) │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └─┬ [email protected] │ ├─┬ [email protected] │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ └── [email protected] deduped │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped └── [email protected]
Handeling Peer Dependencies after installing [email protected]
- ended up going to graphqlv14 due to peer dependencies
> npm install [email protected]
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/graphql
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN node_modules/apollo-cache
npm WARN apollo-cache@"^1.3.5" from [email protected]
npm WARN node_modules/apollo-cache-inmemory
npm WARN 16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0" from [email protected]
npm WARN node_modules/apollo-client
npm WARN apollo-client@"^2.6.4" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/graphql
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN node_modules/apollo-cache
npm WARN apollo-cache@"^1.3.5" from [email protected]
npm WARN node_modules/apollo-cache-inmemory
npm WARN 16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0" from [email protected]
npm WARN node_modules/graphql-tools
npm WARN graphql-tools@"^2.8.0" from the root project
In research graphql-tools, I found this message:
- This package has been deprecated and now it only exports makeExecutableSchema. And it will no longer receive updates. We recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc. Check out https://www.graphql-tools.com to learn what package you should use instead
- I am trying to change it to @graphql-tools/schema for the
src/server/index.js - It looks like maybe I have to uninstall graphql-tools because both these commands:
npm install graphql-tools/[email protected]npm i @graphql-tools/schemaaren't allowing me to install due to the dependency on graphql-tools
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/graphql
npm WARN graphql@"15.0.0" from the root project
npm WARN 9 more (apollo-cache, apollo-cache-inmemory, apollo-link, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0" from [email protected]
npm WARN node_modules/apollo-client/node_modules/apollo-utilities
npm WARN apollo-utilities@"1.3.2" from [email protected]
npm WARN node_modules/apollo-client
npm WARN 1 more (apollo-cache)
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/graphql
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0" from [email protected]
npm WARN node_modules/apollo-client/node_modules/apollo-utilities
npm WARN apollo-utilities@"1.3.2" from [email protected]
npm WARN node_modules/apollo-client
npm WARN 1 more (apollo-cache)
npm WARN deprecated [email protected]: The `apollo-tracing` package is no longer part of Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#tracing for details
npm WARN deprecated [email protected]: The `graphql-extensions` API has been removed from Apollo Server 3. Use the plugin API instead: https://www.apollographql.com/docs/apollo-server/integrations/plugins/
npm WARN deprecated [email protected]: The functionality provided by the `apollo-cache-control` package is built in to `apollo-server-core` starting with Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#cachecontrol for details.
[email protected] deprecation
npm WARN deprecated [email protected]: The `apollo-server-core` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated [email protected]: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
after funning npm ls graphql, I was able to see that graphql has upgraded easily to version 14.7.0, except for the following dependencies:
├─┬ [email protected]
│ └─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected]
I'm running in circles it seems
- After trying to ungrade graphql to 16.6.0 - because apollo/server requires that level no matter how low I go with the version, it only makes sense that this is my next to-do!
- A lot of our current dependencies require the highest of v15 graphql, but nothing for 16.6.0, which is what apollo/server wants in order to utilize it.
- Going to take a brain break!
> npm install [email protected]
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/graphql
npm WARN peer graphql@"^14.3.1" from @apollo/[email protected]
npm WARN node_modules/@apollo/react-common
npm WARN @apollo/react-common@"^3.1.4" from @apollo/[email protected]
npm WARN node_modules/@apollo/react-components
npm WARN 4 more (@apollo/react-hoc, @apollo/react-hooks, ...)
npm WARN 20 more (@apollo/react-components, @apollo/react-hoc, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN node_modules/apollo-cache-inmemory
npm WARN apollo-cache-inmemory@"^1.6.6" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/graphql
npm WARN peer graphql@"^14.3.1" from @apollo/[email protected]
npm WARN node_modules/@apollo/react-common
npm WARN @apollo/react-common@"^3.1.4" from @apollo/[email protected]
npm WARN node_modules/@apollo/react-components
npm WARN 4 more (@apollo/react-hoc, @apollo/react-hooks, ...)
npm WARN 20 more (@apollo/react-components, @apollo/react-hoc, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0" from [email protected]
npm WARN node_modules/apollo-client
npm WARN peer apollo-client@"^2.6.4" from @apollo/[email protected]
npm WARN node_modules/@apollo/react-common
npm WARN 5 more (@apollo/react-components, @apollo/react-hoc, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/graphql
npm WARN peer graphql@"^14.3.1" from @apollo/[email protected]
npm WARN node_modules/@apollo/react-common
npm WARN @apollo/react-common@"^3.1.4" from @apollo/[email protected]
npm WARN node_modules/@apollo/react-components
npm WARN 4 more (@apollo/react-hoc, @apollo/react-hooks, ...)
npm WARN 20 more (@apollo/react-components, @apollo/react-hoc, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0" from [email protected]
npm WARN node_modules/apollo-client
npm WARN peer apollo-client@"^2.6.4" from @apollo/[email protected]
npm WARN node_modules/@apollo/react-common
npm WARN 5 more (@apollo/react-components, @apollo/react-hoc, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/graphql
npm WARN peer graphql@"^14.3.1" from @apollo/[email protected]
npm WARN node_modules/@apollo/react-common
npm WARN @apollo/react-common@"^3.1.4" from @apollo/[email protected]
npm WARN node_modules/@apollo/react-components
npm WARN 4 more (@apollo/react-hoc, @apollo/react-hooks, ...)
npm WARN 20 more (@apollo/react-components, @apollo/react-hoc, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.3 || ^0.12.3 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN node_modules/apollo-link
npm WARN peer apollo-link@"^1.2.12" from @apollo/[email protected]
npm WARN node_modules/@apollo/react-components
npm WARN 5 more (apollo-client, apollo-link-error, apollo-link-http, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/graphql
npm WARN peer graphql@"^14.3.1" from @apollo/[email protected]
npm WARN node_modules/@apollo/react-common
npm WARN @apollo/react-common@"^3.1.4" from @apollo/[email protected]
npm WARN node_modules/@apollo/react-components
npm WARN 4 more (@apollo/react-hoc, @apollo/react-hooks, ...)
npm WARN 20 more (@apollo/react-components, @apollo/react-hoc, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN node_modules/apollo-link-http
npm WARN apollo-link-http@"^1.5.17" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/graphql
npm WARN peer graphql@"^14.3.1" from @apollo/[email protected]
npm WARN node_modules/@apollo/react-common
npm WARN @apollo/react-common@"^3.1.4" from @apollo/[email protected]
npm WARN node_modules/@apollo/react-components
npm WARN 4 more (@apollo/react-hoc, @apollo/react-hooks, ...)
npm WARN 20 more (@apollo/react-components, @apollo/react-hoc, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN node_modules/apollo-utilities
npm WARN peer apollo-utilities@"^1.3.2" from @apollo/[email protected]
npm WARN node_modules/@apollo/react-common
npm WARN 5 more (@apollo/react-components, apollo-cache, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/graphql
npm WARN peer graphql@"^14.3.1" from @apollo/[email protected]
npm WARN node_modules/@apollo/react-common
npm WARN @apollo/react-common@"^3.1.4" from @apollo/[email protected]
npm WARN node_modules/@apollo/react-components
npm WARN 4 more (@apollo/react-hoc, @apollo/react-hooks, ...)
npm WARN 20 more (@apollo/react-components, @apollo/react-hoc, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^14.3.1" from [email protected]
npm WARN node_modules/react-apollo
npm WARN react-apollo@"^3.1.5" from the root project
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/graphql
npm ERR! graphql@"16.6.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer graphql@"^0.11.3 || ^0.12.3 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm ERR! node_modules/apollo-link
npm ERR! apollo-link@"^1.2.14" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/ariqueaguilar/.npm/_logs/2023-12-08T20_39_00_419Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in: /Users/ariqueaguilar/.npm/_logs/2023-12-08T20_39_00_419Z-debug-0.log
AssignmentSummary Base Code BEFORE
import PropTypes from "prop-types";
import React, { Component } from "react";
import { StyleSheet, css } from "aphrodite";
import { compose } from "recompose";
import Button from "@material-ui/core/Button";
import Badge from "@material-ui/core/Badge";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardHeader from "@material-ui/core/CardHeader";
import { withRouter } from "react-router";
import withMuiTheme from "../containers/hoc/withMuiTheme";
import { dataTest } from "../lib/attributes";
import {
getSideboxes,
renderSummary
} from "../extensions/texter-sideboxes/components";
import theme from "../styles/mui-theme";
const styles = StyleSheet.create({
container: {
margin: `${theme.spacing(2)}px 0`
},
image: {
height: 100
},
buttonRow: {
display: "flex",
flexWrap: "wrap",
gap: theme.spacing(2),
marginBottom: theme.spacing(2)
}
});
export class AssignmentSummaryBase extends Component {
state = {
badTimezoneTooltipOpen: false
};
goToTodos(contactsFilter, assignmentId) {
const { organizationId, router, todoLink } = this.props;
if (todoLink) {
return todoLink(contactsFilter, assignmentId, router);
}
if (contactsFilter) {
router.push(
`/app/${organizationId}/todos/${assignmentId}/${contactsFilter}`
);
}
}
renderBadgedButton({
dataTestText,
assignment,
title,
count,
disabled,
contactsFilter,
hideIfZero,
style,
hideBadge,
color
}) {
if (count === 0 && hideIfZero) {
return "";
}
if (count === 0 || hideBadge) {
return (
<Button
{...dataTest(dataTestText)}
disabled={disabled}
variant="outlined"
onClick={() => this.goToTodos(contactsFilter, assignment.id)}
>
{title}
</Button>
);
} else {
return (
<Badge
key={title}
badgeContent={count || ""}
color={disabled ? "primary" : color}
>
<Button
{...dataTest(dataTestText)}
disabled={disabled}
onClick={() => this.goToTodos(contactsFilter, assignment.id)}
variant="outlined"
>
{title}
</Button>
</Badge>
);
}
}
render() {
const { assignment, texter } = this.props;
const {
campaign,
unmessagedCount,
unrepliedCount,
badTimezoneCount,
pastMessagesCount,
skippedMessagesCount,
feedback
} = assignment;
const {
id: campaignId,
title,
description,
primaryColor,
logoImageUrl,
introHtml,
texterUIConfig
} = campaign;
const settingsData = JSON.parse(
(texterUIConfig && texterUIConfig.options) || "{}"
);
const sideboxProps = { assignment, campaign, texter, settingsData };
const enabledSideboxes = getSideboxes(sideboxProps, "TexterTodoList");
// if there's a sidebox marked popup, then we will only show that sidebox and little else
const hasPopupSidebox = Boolean(enabledSideboxes.popups.length);
const sideboxList = enabledSideboxes
.filter(sb =>
hasPopupSidebox ? sb.name === enabledSideboxes.popups[0] : true
)
.map(sb => renderSummary(sb, settingsData, this, sideboxProps));
let cardTitleTextColor = this.props.muiTheme.palette.getContrastText(
this.props.muiTheme.palette.background.default
);
if (primaryColor) {
try {
cardTitleTextColor = this.props.muiTheme.palette.getContrastText(
primaryColor
);
} catch (e) {}
}
// NOTE: we bring back archived campaigns if they have feedback
// but want to get rid of them once feedback is acknowledged
if (campaign.isArchived && !hasPopupSidebox) return null;
const campaignAllowBulkSend = texterUIConfig && texterUIConfig.sideboxChoices && texterUIConfig.sideboxChoices.includes("per-campaign-bulk-send") ? settingsData["per-campaign-bulk-send"] : true;
return (
<div
className={css(styles.container)}
{...dataTest(`assignmentSummary-${campaignId}`)}
>
<Card>
<CardHeader
title={title}
subheader={description}
style={{
backgroundColor: primaryColor,
color: cardTitleTextColor
}}
subheaderTypographyProps={{
color: "inherit"
}}
avatar={
logoImageUrl ? (
<img src={logoImageUrl} className={css(styles.image)} />
) : null
}
/>
<CardContent>
{introHtml && (
<div style={{ margin: "20px" }}>
<div dangerouslySetInnerHTML={{ __html: introHtml }} />
</div>
)}
{(hasPopupSidebox && sideboxList) || null}
<div className={css(styles.buttonRow)}>
{(this.props.assignment.campaign.organization.allowSendAll &&
campaignAllowBulkSend) ||
hasPopupSidebox
? null
: this.renderBadgedButton({
dataTestText: "sendFirstTexts",
assignment,
title: "Send first texts",
count: unmessagedCount,
primary: true,
disabled: false,
contactsFilter: "text",
hideIfZero: true,
color: "primary"
})}
{hasPopupSidebox
? null
: this.renderBadgedButton({
dataTestText: "Respond",
assignment,
title: "Respond",
count: unrepliedCount,
primary: false,
disabled: false,
contactsFilter: "reply",
hideIfZero: true,
color: "error"
})}
{this.renderBadgedButton({
assignment,
title: pastMessagesCount
? `Past ${pastMessagesCount} Messages`
: `Past Messages`,
count: pastMessagesCount,
primary: false,
disabled: false,
contactsFilter: "stale",
hideIfZero: true,
color: "secondary",
hideBadge: true
})}
{this.renderBadgedButton({
assignment,
title: skippedMessagesCount
? `Skipped ${skippedMessagesCount} Messages`
: `Skipped Messages`,
count: skippedMessagesCount,
primary: false,
disabled: false,
contactsFilter: "skipped",
hideIfZero: true,
color: "secondary",
hideBadge: true
})}
{this.props.assignment.campaign.organization.allowSendAll &&
campaignAllowBulkSend &&
!hasPopupSidebox
? this.renderBadgedButton({
assignment,
title: "Send messages",
primary: true,
disabled: false,
contactsFilter: "text",
count: 0,
hideIfZero: false,
color: "primary"
})
: ""}
{this.renderBadgedButton({
assignment,
title: "Send later (outside timezone)",
count: badTimezoneCount,
primary: false,
disabled: true,
contactsFilter: null,
hideIfZero: true,
color: "secondary"
})}
</div>
{sideboxList.length && !hasPopupSidebox ? (
<div>{sideboxList}</div>
) : null}
{!sideboxList.length &&
!unmessagedCount &&
!unrepliedCount &&
!pastMessagesCount &&
!skippedMessagesCount &&
!badTimezoneCount && <div>Nothing to do</div>}
</CardContent>
</Card>
</div>
);
}
}
AssignmentSummaryBase.propTypes = {
organizationId: PropTypes.string,
router: PropTypes.object,
assignment: PropTypes.object,
texter: PropTypes.object,
refreshData: PropTypes.func,
todoLink: PropTypes.func
};
export default compose(withMuiTheme, withRouter)(AssignmentSummaryBase);
AFTER
import PropTypes from "prop-types";
import React, { Component } from "react";
import { StyleSheet, css } from "aphrodite";
// import { compose } from "recompose";
import composeHooks from 'react-hooks-compose';
import Button from "@material-ui/core/Button";
import Badge from "@material-ui/core/Badge";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardHeader from "@material-ui/core/CardHeader";
import { withRouter } from "react-router";
import withMuiTheme from "../containers/hoc/withMuiTheme";
import { dataTest } from "../lib/attributes";
import {
getSideboxes,
renderSummary
} from "../extensions/texter-sideboxes/components";
import theme from "../styles/mui-theme";
const useForm = () => {
// what does this Assignment Summary utilize as a form?
//styles
//
}
const styles = StyleSheet.create({
container: {
margin: `${theme.spacing(2)}px 0`
},
image: {
height: 100
},
buttonRow: {
display: "flex",
flexWrap: "wrap",
gap: theme.spacing(2),
marginBottom: theme.spacing(2)
}
});
export class AssignmentSummaryBase {
state = {
badTimezoneTooltipOpen: false
};
goToTodos(contactsFilter, assignmentId) {
const { organizationId, router, todoLink } = this.props;
if (todoLink) {
return todoLink(contactsFilter, assignmentId, router);
}
if (contactsFilter) {
router.push(
`/app/${organizationId}/todos/${assignmentId}/${contactsFilter}`
);
}
}
renderBadgedButton({
dataTestText,
assignment,
title,
count,
disabled,
contactsFilter,
hideIfZero,
style,
hideBadge,
color
}) {
if (count === 0 && hideIfZero) {
return "";
}
if (count === 0 || hideBadge) {
return (
<Button
{...dataTest(dataTestText)}
disabled={disabled}
variant="outlined"
onClick={() => this.goToTodos(contactsFilter, assignment.id)}
>
{title}
</Button>
);
} else {
return (
<Badge
key={title}
badgeContent={count || ""}
color={disabled ? "primary" : color}
>
<Button
{...dataTest(dataTestText)}
disabled={disabled}
onClick={() => this.goToTodos(contactsFilter, assignment.id)}
variant="outlined"
>
{title}
</Button>
</Badge>
);
}
}
render() {
const { assignment, texter } = this.props;
const {
campaign,
unmessagedCount,
unrepliedCount,
badTimezoneCount,
pastMessagesCount,
skippedMessagesCount,
feedback
} = assignment;
const {
id: campaignId,
title,
description,
primaryColor,
logoImageUrl,
introHtml,
texterUIConfig
} = campaign;
const settingsData = JSON.parse(
(texterUIConfig && texterUIConfig.options) || "{}"
);
const sideboxProps = { assignment, campaign, texter, settingsData };
const enabledSideboxes = getSideboxes(sideboxProps, "TexterTodoList");
// if there's a sidebox marked popup, then we will only show that sidebox and little else
const hasPopupSidebox = Boolean(enabledSideboxes.popups.length);
const sideboxList = enabledSideboxes
.filter(sb =>
hasPopupSidebox ? sb.name === enabledSideboxes.popups[0] : true
)
.map(sb => renderSummary(sb, settingsData, this, sideboxProps));
let cardTitleTextColor = this.props.muiTheme.palette.getContrastText(
this.props.muiTheme.palette.background.default
);
if (primaryColor) {
try {
cardTitleTextColor = this.props.muiTheme.palette.getContrastText(
primaryColor
);
} catch (e) {}
}
// NOTE: we bring back archived campaigns if they have feedback
// but want to get rid of them once feedback is acknowledged
if (campaign.isArchived && !hasPopupSidebox) return null;
const campaignAllowBulkSend = texterUIConfig && texterUIConfig.sideboxChoices && texterUIConfig.sideboxChoices.includes("per-campaign-bulk-send") ? settingsData["per-campaign-bulk-send"] : true;
return (
<div
className={css(styles.container)}
{...dataTest(`assignmentSummary-${campaignId}`)}
>
<Card>
<CardHeader
title={title}
subheader={description}
style={{
backgroundColor: primaryColor,
color: cardTitleTextColor
}}
subheaderTypographyProps={{
color: "inherit"
}}
avatar={
logoImageUrl ? (
<img src={logoImageUrl} className={css(styles.image)} />
) : null
}
/>
<CardContent>
{introHtml && (
<div style={{ margin: "20px" }}>
<div dangerouslySetInnerHTML={{ __html: introHtml }} />
</div>
)}
{(hasPopupSidebox && sideboxList) || null}
<div className={css(styles.buttonRow)}>
{(this.props.assignment.campaign.organization.allowSendAll &&
campaignAllowBulkSend) ||
hasPopupSidebox
? null
: this.renderBadgedButton({
dataTestText: "sendFirstTexts",
assignment,
title: "Send first texts",
count: unmessagedCount,
primary: true,
disabled: false,
contactsFilter: "text",
hideIfZero: true,
color: "primary"
})}
{hasPopupSidebox
? null
: this.renderBadgedButton({
dataTestText: "Respond",
assignment,
title: "Respond",
count: unrepliedCount,
primary: false,
disabled: false,
contactsFilter: "reply",
hideIfZero: true,
color: "error"
})}
{this.renderBadgedButton({
assignment,
title: pastMessagesCount
? `Past ${pastMessagesCount} Messages`
: `Past Messages`,
count: pastMessagesCount,
primary: false,
disabled: false,
contactsFilter: "stale",
hideIfZero: true,
color: "secondary",
hideBadge: true
})}
{this.renderBadgedButton({
assignment,
title: skippedMessagesCount
? `Skipped ${skippedMessagesCount} Messages`
: `Skipped Messages`,
count: skippedMessagesCount,
primary: false,
disabled: false,
contactsFilter: "skipped",
hideIfZero: true,
color: "secondary",
hideBadge: true
})}
{this.props.assignment.campaign.organization.allowSendAll &&
campaignAllowBulkSend &&
!hasPopupSidebox
? this.renderBadgedButton({
assignment,
title: "Send messages",
primary: true,
disabled: false,
contactsFilter: "text",
count: 0,
hideIfZero: false,
color: "primary"
})
: ""}
{this.renderBadgedButton({
assignment,
title: "Send later (outside timezone)",
count: badTimezoneCount,
primary: false,
disabled: true,
contactsFilter: null,
hideIfZero: true,
color: "secondary"
})}
</div>
{sideboxList.length && !hasPopupSidebox ? (
<div>{sideboxList}</div>
) : null}
{!sideboxList.length &&
!unmessagedCount &&
!unrepliedCount &&
!pastMessagesCount &&
!skippedMessagesCount &&
!badTimezoneCount && <div>Nothing to do</div>}
</CardContent>
</Card>
</div>
);
}
}
AssignmentSummaryBase.propTypes = {
organizationId: PropTypes.string,
router: PropTypes.object,
assignment: PropTypes.object,
texter: PropTypes.object,
refreshData: PropTypes.func,
todoLink: PropTypes.func
};
export default composeHooks( {withMuiTheme, withRouter} )( AssignmentSummaryBase );