Обновление приложения React 16 до версии Apollo 2 - PullRequest
Новая
       38

Обновление приложения React 16 до версии Apollo 2

0 голосов
/ 24 апреля 2018

У меня есть приложение реагирует на 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 из других мест?

1 Ответ

0 голосов
/ 24 апреля 2018

Клиент Apollo 2.0 больше не экспортирует gql и требует, чтобы вы импортировали graphql-tag напрямую

вместо import { gql } from "react-apollo", используйте import gql from "graphql-tag"

...