使用 apollo-link-error 显示错误 toast

Posted 2023-03-08

【中文标题】使用 apollo-link-error 显示错误 toast

【英文标题】：Showing error toast with apollo-link-error

【发布时间】：2020-04-08 22:07:29

【问题描述】：

我正在尝试使用 apollo-link-error 显示 toast/snackbar，但是当我这样做时，错误 toast 反复出现而没有停止，并且加载时显示的加载器在后台旋转。

我的 apollo 客户端包含此代码...

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 被重复创建，我怎么能在错误时只显示一个？

谢谢。

【问题讨论】：

graphql-yoga 在后台使用 apollo-server -- 在两者之间切换不需要对前端代码进行任何更改。

@bordeltabernacle 你解决了这个问题了吗？看看我的同类 -> ***.com/questions/62086440/…

【参考方案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>

【讨论】：

我尝试使用您的方式来实现自定义 ApolloProvider，但它似乎不起作用。你能看看我的实现吗？ -> ***.com/questions/62086440/…

【参考方案2】：

如果不看整个代码就很难说，但它似乎是在每次渲染组件时添加一个新的 Toast，

你应该检查它的调用方式和位置，我猜这与 apollo 无关，与组件的重新渲染有关

toasts 通常是一个添加到列表中的列表，因此它只会不断增长而不是替换