From e1cf3b736ee07932e6faaaca2b69551987427843 Mon Sep 17 00:00:00 2001
From: leeziwong <leeziwong@users.noreply.github.com>
Date: Sun, 19 May 2024 18:16:33 +0800
Subject: [PATCH] Update the way of creating Apollo client in React

The previous way uses the "useState" hook conditionally, which violates the rules for using React hooks.
---
 .../tutorial-site/content/apollo-client.md            | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/tutorials/frontend/react-apollo-hooks/tutorial-site/content/apollo-client.md b/tutorials/frontend/react-apollo-hooks/tutorial-site/content/apollo-client.md
index 4b9853226..5d694a4ae 100644
--- a/tutorials/frontend/react-apollo-hooks/tutorial-site/content/apollo-client.md
+++ b/tutorials/frontend/react-apollo-hooks/tutorial-site/content/apollo-client.md
@@ -87,10 +87,19 @@ Create the apollo client inside `App` and pass the client prop to `<ApolloProvid
 ```javascript
 const App = ({ idToken }) => {
   const { loading, logout } = useAuth0();
+
++ const client = useMemo(() => {
++   if (!idToken) {
++     return;
++   }
++
++   return createApolloClient(idToken);
++ }, [idToken]);
+
   if (loading) {
     return <div>Loading...</div>;
   }
-+  const [client] = useState(createApolloClient(idToken));
+
    return (
 +    <ApolloProvider client={client}>
        <div>