将 React 16 应用程序升级到 Apollo 2 问题
Posted
技术标签:
【中文标题】将 React 16 应用程序升级到 Apollo 2 问题【英文标题】：Upgrading React 16 App to Apollo 2 Issue 【发布时间】：2018-10-04 22:59:17 【问题描述】：我有一个 react 16 应用程序，我只是想升级到 apollo2。 几乎相同的代码也适用于 Apollo1。
这是我的 index.js 文件
import React from "react"
import ReactDOM from "react-dom"
import ApolloClient from 'apollo-client';
import HttpLink from 'apollo-link-http';
import ReduxCache, apolloReducer from 'apollo-cache-redux';
import ApolloProvider from 'react-apollo';
import Routes from "./router/routes"
import getStore from "./store"
import registerServiceWorker from "./registerServiceWorker"
//See https://github.com/rportugal/apollo-cache-redux
const apolloStore = getStore(apolloReducer);
console.log('index.js: apolloStore:', apolloStore);
const cache = new ReduxCache( apolloStore );
console.log('index.js cache:', cache);
const client = new ApolloClient(
link: new HttpLink( uri: '$FULL_HOST/qe' ),
cache,
);
console.log('index.js client:', client);
ReactDOM.render(
<ApolloProvider client=client store=apolloStore >
<Routes />
</ApolloProvider>,
document.getElementById("root")
)
registerServiceWorker()
store.js
import createStore, applyMiddleware, compose from "redux"
import persistStore, autoRehydrate from "redux-persist"
import thunk from "redux-thunk"
import createReducers from "./reducers"
const isProd = process.env.NODE_ENV === "production"
const middlewares = [
thunk,
,
].filter(m => m) // We want to conditionally add middlewares so we need to remove falsey values
const middleware = applyMiddleware(...middlewares)
export default function getStore(apolloReducer)
const store = createStore(
createReducers(
apollo: apolloReducer,
),
/* eslint-disable no-underscore-dangle */
isProd || !window.__REDUX_DEVTOOLS_EXTENSION__
? undefined
: window.__REDUX_DEVTOOLS_EXTENSION__(),
/* eslint-enable */
compose(middleware, autoRehydrate())
)
persistStore(store,
// We must add the key name for any reducer that we wish to persist here
whitelist: ["pageBuilder", "tracking"],
)
return store
reducers.js
import combineReducers from "redux"
import logs from "./logs"
import
createAudienceName,
createAudienceDescription,
from "./create-audience"
function createReducer(withReducers)
return combineReducers(
createAudienceDisplayError,
createAudienceDescriptionError,
createAudienceNameError,
logs,
...withReducers,
)
export default createReducer
package.json 依赖项
"dependencies":
"all-countries": "^2.0.2",
"apollo-link-http": "^1.5.4",
"brace": "^0.10.0",
"braintree-web-drop-in": "^1.7.0",
"chalk": "1.1.3",
"deep-equal": "^1.0.1",
"dotenv": "4.0.0",
"draft-js": "^0.10.1",
"draft-js-buttons": "^2.0.0-beta6",
"draft-js-inline-toolbar-plugin": "^2.0.0-beta6",
"draft-js-plugins-editor": "^2.0.0-rc8",
"graphql": "^0.13.2",
"graphql-tag": "^2.9.1",
"grommet": "^1.6.0",
"grommet-css": "^1.6.0",
"immutability-helper": "^2.4.0",
"lodash": "^4.17.4",
"moment": "^2.19.3",
"moment-immutable": "^1.0.2",
"object-assign": "4.1.1",
"object-path-immutable": "^0.5.2",
"postcss-flexbugs-fixes": "3.0.0",
"promise": "7.1.1",
"prop-types": "^15.5.0",
"react": "^16.3.2",
"react-ace": "^6.0.0",
"react-addons-shallow-compare": "^15.6.0",
"react-apollo": "^2.1.3",
"apollo-cache-redux": "^0.1.0",
"apollo-client": "^2.2.8",
"react-color": "^2.14.1",
"react-dates": "^16.6.1",
"react-dev-utils": "^5.0.1",
"react-dom": "^16.3.2",
"react-error-overlay": "^1.0.9",
"react-instantsearch": "^5.0.3",
"react-moment-proptypes": "^1.5.0",
"react-player": "^1.4.0",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-rte": "^0.16.1",
"react-select": "^1.2.1",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-persist": "^4.8.2",
"redux-thunk": "^2.2.0",
"validator": "^8.2.0",
"whatwg-fetch": "2.0.3",
"yamljs": "^0.3.0"
当我启动我的应用程序时 - 我收到此错误。
Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(App)".
./src/index.js
src/index.js:41
invariant
node_modules/invariant/browser.js:40
new Connect
node_modules/react-redux/es/components/connectAdvanced.js:117
constructClassInstance
node_modules/react-dom/cjs/react-dom.development.js:6801
updateClassComponent
node_modules/react-dom/cjs/react-dom.development.js:8336
beginWork
node_modules/react-dom/cjs/react-dom.development.js:8982
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js:11814
workLoop
node_modules/react-dom/cjs/react-dom.development.js:11843
htmlUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js:100
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:138
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:187
replayUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js:11318
renderRoot
node_modules/react-dom/cjs/react-dom.development.js:11885
performWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js:12449
performWork
node_modules/react-dom/cjs/react-dom.development.js:12370
performSyncWork
node_modules/react-dom/cjs/react-dom.development.js:12347
requestWork
node_modules/react-dom/cjs/react-dom.development.js:12247
scheduleWorkImpl
node_modules/react-dom/cjs/react-dom.development.js:12122
scheduleWork
node_modules/react-dom/cjs/react-dom.development.js:12082
scheduleRootUpdate
node_modules/react-dom/cjs/react-dom.development.js:12710
updateContainerAtExpirationTime
node_modules/react-dom/cjs/react-dom.development.js:12738
updateContainer
node_modules/react-dom/cjs/react-dom.development.js:12765
ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render
node_modules/react-dom/cjs/react-dom.development.js:16069
(anonymous function)
node_modules/react-dom/cjs/react-dom.development.js:16488
unbatchedUpdates
node_modules/react-dom/cjs/react-dom.development.js:12557
legacyRenderSubtreeIntoContainer
node_modules/react-dom/cjs/react-dom.development.js:16484
render
node_modules/react-dom/cjs/react-dom.development.js:16543
任何想法我需要做些什么来解决这个特定的错误？
更新 如果我导入以下文件
import Provider from "react-redux"
并将我的反应渲染方法更改为：
ReactDOM.render(
<ApolloProvider client=client>
<Provider store=store>
<Routes/>
</Provider>
</ApolloProvider>,
document.getElementById("root")
)
这个错误消失了，但它开始在任何地方抱怨然后我使用 gql 例如：
import gql from "react-apollo"
const EDIT_ROUTE = gql`
mutation editRoute(
gql 未定义。我应该从其他地方导入 gql 吗？
【问题讨论】：
Apollo 客户端 2.0 不再导出gql，需要你直接导入graphql-tag
谢谢@DanielRearden - 成功了
【参考方案1】：
Apollo客户端2.0不再导出gql，需要你直接导入graphql-tag
而不是import gql from "react-apollo"
使用import gql from "graphql-tag"
【讨论】：
以上是关于将 React 16 应用程序升级到 Apollo 2 问题的主要内容，如果未能解决你的问题，请参考以下文章
React - Apollo，如何将 Object 放入查询中？
将 react-native 添加到 monorepo 后，React apollo hooks 失败
React - Apollo 客户端，如何将查询结果添加到状态
nodejs升级后运行apollo服务器的问题（使用nestjs和fastify）