Apollo Query Component не определен - PullRequest
Новая
       14

Apollo Query Component не определен

0 голосов
/ 22 марта 2019

У меня возникают некоторые проблемы, когда следующий функциональный компонент, использующий компонент Query Apollo, выдает ошибки, когда он добавляется в мой App.js. Я не могу понять, что именно происходит, я получаю ошибку

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Это, насколько я могу судить из моего исследования, представляет ЛИБО ошибку импорта или ошибку, при которой функция, возвращаемая моим приложением, не определена. Это не ошибка импорта, так как я дважды и трижды проверял, что он экспортируется и импортируется по умолчанию.

Для контекста я пытаюсь условно отобразить определенный компонент реакции, основываясь на том, существует ли значение в моей базе данных. У меня есть это значение в моей схеме приложения, и мой запрос GraphQL, похоже, возвращает правильный узел документа.

Код ниже: Мой запрос, чтобы условно выбрать, какая форма отображается: 

import React from 'react'
import PropTypes from 'prop-types'
import BillingForm from '../ConfigureBilling/BillingForm'
import gql from 'graphql-tag'
import Query from 'react-apollo'


import UpdateBilling from '../ConfigureBilling/UpdateBilling'


const STRIPE_QUERY = gql`
  query Workspace {
    workspaces(workspaceUuid: "test_workspace_id", withUsers: false) {
      stripeCustomerId
    }
  }
`
console.log(STRIPE_QUERY)

const BillingConfig = ({ workspace }) => {
  return (
    <Query query={STRIPE_QUERY}>
      {({ data }) => {
        const { workspaces } = data
        return workspaces.stripeCustomerId != null ? (
          <BillingForm workspace={workspace} />
        ) : (
          <UpdateBilling workspace={workspace} />
        )
      }}
    </Query>
  )
}

BillingConfig.propTypes = {
  workspace: PropTypes.object,
}

export default BillingConfig

Мой файл index.js, который отображает фактический компонент в моем приложении: 

import React from 'react'
import PropTypes from 'prop-types'
import GetWorkspace from '../GetWorkspace'
import Module from '../../app/Module'
import BillingForm from '../ConfigureBilling/BillingForm'
import BillingConfig from '../Data/BillingConfig'

import { Elements, StripeProvider } from 'react-stripe-elements';
import UpdateBilling from '../ConfigureBilling/UpdateBilling'

class Billing extends React.Component {
  menu = {
    nav: 'workspace',
  }

  render() {
    const { workspace } = this.props

    // Error handled
    if (!workspace) return <Module nada />

    return (
      <Module metaTitle={'Billing | ' + workspace.label} menu={this.menu}>
        <StripeProvider apiKey="TESTKEY">
          <Elements>
            <BillingForm workspace={workspace} />
          </Elements>
        </StripeProvider>
      </Module>
    )
  }
}

Billing.propTypes = {
  workspace: PropTypes.object,
}

export default GetWorkspace(Billing)

У кого-нибудь есть мысли о том, что может быть причиной этой ошибки?

...