reactjs - 使用 apollo-link-error 显示错误 toast
问题描述
我试图用 显示一个 toast/snackbar apollo-link-error
,但是当我这样做时,错误 toast 反复出现而没有停止,并且加载时显示的加载器在后台旋转。
我的阿波罗客户端包含此代码...
const errorLink = onError(handleErrors)
const httpLink: ApolloLink = createHttpLink({
uri: graphqlUri,
})
const link = ApolloLink.from([errorLink, authLink, httpLink])
该handleErrors
函数在我的 App.tsx 中传入的位置...
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 通知,而只是打印到控制台,它就可以正常工作。为什么我的 toast 被重复创建,我怎么能只显示一个错误?
谢谢。
解决方案
您可能已经找到了解决方案,但此示例答案可能对其他人有用。
注意:此答案未使用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>
推荐阅读
- php - php - 如何在一些字母之间随机并按顺序组合数字的每个组成部分
- c# - 如何将来自 TextBox 的 UserInput 存储在变量中 - Avalonia UI、C#
- java - 无法在 jar 文件(docker build)中加载资源文件。本地工作正常
- javascript - 如何正确绑定 CoreUI 的 CSwitch?
- c++ - hazelcast c++ 客户端示例不断崩溃
- angular - 使用 Chrome 80 在本地主机上使用 Convertigo 的 403 问题
- c# - 尝试通过帐户从 AspNetUser 获取电子邮件时出现错误,该帐户具有带有 AspNetUser 身份的 FK
- multiline - 多行文件节拍模式以匹配多个单词
- java - 是否可以像 element.sendKeys(name-*.zip) 那样做,比如 name-Ian.zip?或任何等价物?
- xamarin.forms - Xamarin Forms - 基于属性动态创建条目或选取器并将其绑定到 ObservableCollection 对象