无法在上下文中找到“客户端”或作为选项传入。将根组件包裹在 <ApolloProvider> 中，或者传递一个 ApolloClient 实例答案

【问题标题】：Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance无法在上下文中找到“客户端”或作为选项传入。将根组件包裹在 <ApolloProvider> 中，或者传递一个 ApolloClient 实例
【发布时间】：2022-06-29 23:35:34
【问题描述】：

这是我的第一个阿波罗计划，但我已经使用它一段时间了，就阿波罗而言，事情一直很顺利，直到最近。虽然我了解 Apollo 是如何工作的，但我显然不知道它所涉及的所有细节，而且我不清楚我想知道该项目应该如何包装。下面是我的 App.js，当它按预期工作时......

// Auth for token
const authLink = setContext((_, { headers }) => {
    const token = state
    return {
        headers: {
            ...headers,
            authorization: token ? `${token}` : ''
        }
    }
})

// Initialize Apollo Client
const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
});

const Stack = createNativeStackNavigator();

export default function App() {

// Other irrelevant things like fonts...

const ErrorPrompt = (props) => {
    return(
      <View>
        <View style={{height: 50, width: '100%', backgroundColor: "#534FFF"}}/>
        <Text style={{...Template.title, fontSize: 30}}>Something happened!</Text>
        <Text style={{...Template.subTitle, fontSize: 20}}>We apologize for the inconvenience</Text>
        <Text style={{...Template.title, fontSize: 20, color: '#534FFF'}}>{props.error.toString()}</Text>
        <View style={{marginLeft: 30}}>
          <Text style={{...Template.subTitle, fontSize: 15, marginRight: 30, marginLeft: 0}}>An email has been sent to the Support Team to attempt to prevent this error from occurring again. We thank you for your support and patience</Text>
        </View>
        <View style={{marginTop: 50}}>
          <Button onPress={props.resetError} title={'Reload Application'} />
        </View>
      </View>
    )
  }

   if(!loaded){
    return null
  }
  try{
    return (
      
      <ErrorBoundary 
        FallbackComponent={ErrorPrompt}
      > 
      <NavigationContainer>
        <ApolloProvider client={client}>
          <RecoilRoot>
            <IconRegistry icons={EvaIconsPack} />
            <ApplicationProvider {...eva} theme={{...eva.light, ...theme}}>
              <PaperProvider>
              <KeyboardAvoidingView
                behavior="padding"
                enabled
                style={{flexGrow:1,height:'110%'}}
                >
                <View style={AppStyles.container}>
                  <Stack.Navigator screenOptions={{headerShown: false}}>
              
                    {/* {loggedIn === false ? ( */}
                    <Stack.Screen name="/">
                      {props => <LandingPage {...props} handleLoggedIn={handleLoggedIn} rememberMe={rememberMe} setRememberMe={setRememberMe} />}
                    </Stack.Screen>
                     {/* ) : null}  */}
                
                    <Stack.Screen name="home">
                      {props => <Home {...props} handleLoggedIn={handleLoggedIn} />}
                    </Stack.Screen>
       
                   {/*  About 40 more Stack Screens   */}
                
                  </Stack.Navigator>
                </View>
                </KeyboardAvoidingView>
              </PaperProvider>
            </ApplicationProvider>
          </RecoilRoot>
        </ApolloProvider>
      </NavigationContainer>
      </ErrorBoundary>
    )
  }
 catch(error){
    return(<ErrorPrompt code={error} />)
  }

我为代码量道歉，但我的主要问题是，包装组件的顺序重要吗？我知道我需要我的 NavContainer、ErrorBoundary 和 RecoilRoot 包装所有页面，但是这些顺序重要吗？因为我的代码运行良好，直到我添加了一个 更改为 ErrorPrompt 组件。 新的 ErrorPrompt 看起来像这样...

const ErrorPrompt = (props) => {

    useEffect(() => {
      sendErrorEmail({
        variables: {
          errorCode: props.error.toString()
        }
      })
    }, [])

    return(
      // The same return as before
    )
  }

添加后，我收到了Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance 错误。该消息并不是特别有用，因为所有内容都包含在其中并且我有一个客户传入。有谁知道解决方案/如果这些包装的顺序很重要，并且确实如此，它应该是什么顺序？

【问题讨论】：

标签： react-native apollo apollo-client

【解决方案1】：

我发现了问题。这不是包装顺序的问题，而是 我在用 Apollo Provider 包装的组件的外部声明了 sendErrorEmail 突变。 我让它在 App 中浮动.js，但是当我将该行移至ErrorPrompt = () => { 下时，错误已被删除

【讨论】：