Question

我试图用apollo-link-error显示一个吐司/小吃店，但是当我这样做时，错误吐司反复出现而没有停止，并且在加载时显示的加载程序在后台旋转。

我的阿波罗客户包含此代码...

const errorLink = onError(handleErrors)

const httpLink: ApolloLink = createHttpLink({
  uri: graphqlUri,
})

const link = ApolloLink.from([errorLink, authLink, httpLink])

在我的App.tsx中传递handleErrors函数的位置...

const { addToast } = useToasts()

const handleErrors: ErrorHandler = ({ graphQLErrors, networkError }) => {
    if (graphQLErrors) {
      const errors = graphQLErrors.map(({ message }) => message)
      addToast(errors.join(`, `))
    }

    if (networkError) console.log(`[Network error]: ${networkError}`)
  }

  const client = apolloClient(
    token,
    GRAPHQL_URI,
    handleErrors
  )

，然后传递给ApolloProvider。 useToasts挂钩来自react-toast-notifications。

我以前是在处理组件中的错误...

const { loading, data, error } = useQuery(Query)

if (error) return <div>{error.message}</div>

但是在后端已从使用graphql-yoga切换到apollo-server，因此必须以不同的方式处理错误。

如果我删除了Toast通知，而只是打印到控制台，则可以正常工作。为什么我的吐司会被反复创建，我怎么能在出错时显示一个？

谢谢。

Answer 1

您可能已经找到了解决方案，但是此示例答案可能对其他人有用。

注意：此答案不使用react-toast-notification

import React, { useState, useContext } from 'react'
import ApolloClient from 'apollo-boost'

const ErrorContext = React.createContext([])

const ErrorProvider = () => {
  const [errors, setError] = useState([])
  const handleUpdateError = error => {
    setError([...errors, error])
  }
  const ctx = { handleUpdateError }
  return (
    <ErrorContext.Provider value={ctx}>
      {errors.map(errorMessage => <Toast>{errorMessage}</Toast>)}
      {children}
    </ErrorContext.Provider>
  )
}

class ApolloCustomProviderWithContext extends React.Component {
  construtor(props) {
    super(props)
    
    const { handleUpdateError } = props

    const errorLink = onError(({ graphQLErrors, networkError }) => {
      if (graphQLErrors) {
        const errors = graphQLErrors.map(({ message }) => message)

        handleUpdateError(errors.join(','))
      }
    })
    
    const httpLink = createHttpLink({ uri: "/graphql" });
    
    this._client = new ApolloClient({
      link: errorLink.concat(httpLink),
      cache: new InMemoryCache(),
      
    })
  }
  
  render () {
    return <ApolloProvider client={this._client}>{this.props.children}</ApolloProvider>
  }
}

const ApolloCustomProvider = props => {
  const { handleUpdateError } = useContext(ErrorContext)
  
  return (
    <ApolloCustomProviderWithContext handleUpdateError={handleUpdateError}>
      {props.children()}
    </ApolloCustomProviderWithContext>
  )
}

const Application = () => {
  return (
    <ErrorProvider>
      <ApolloCustomProvider>
        {children}
      </ApolloCustomProvider>
      // Your Application Code
    </ErrorProvider>
  )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

很难看清整个代码，但似乎在每个组件渲染中都添加了一个新的Toast，

您应该检查调用的方式和位置，我想这与阿波罗无关，也与组件的重新渲染无关

通常，烤面包也是添加到列表中的，所以它只会越来越多而不是取代

显示带有阿波罗链接错误的错误吐司

2 个答案: