无法在上下文中找到"client"或作为选项传入。将根组件包装在 <ApolloProvider>中，或传递 ApolloClient 实例

Question

这是我的第一个阿波罗项目，但我已经使用它一段时间了，直到最近，阿波罗方面的事情都很顺利。虽然我知道阿波罗是如何工作的，但我显然不知道与之相关的所有细节，我也不清楚这个项目应该如何包装。下面是我的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错误。这个消息并不是特别有用，因为这两个东西都是用AND包装的，我有一个客户端传入。有人知道解决方案吗?如果这些包装的顺序很重要，它应该是什么顺序?

Answer 1

我发现了这个问题。我在一个由Apollo Provider包装的组件中声明了sendroremail突变OUTSIDE，这不是事物包装顺序的问题，而是。我把它在App.js中浮动，但是当我将行移动到ErrorPrompt = () => {下时，错误被删除了