Fix api-routes-apollo-server-and-client-auth Example (vercel#10334)

IvanPaqmind · web-flow · commit 74c2600b469b · 2020-01-30T14:33:42.000+01:00
* Fix api-routes-apollo-server-and-client-auth Example `client.resetStore()` must be called after SignIn, SignOut actions Otherwise, even the current basic auth is not working 100% of the time... For example, as caching occurs here: ``` const { data, loading } = useQuery(ViewerQuery) ``` it sometimes (race conditions!) prevents a user from signing in the current code base. Check apollographql/apollo-cache-persist#34 (comment) comment for more info. * Fix api-routes-apollo-server-and-client-auth Example (linting)
diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/signin.js b/examples/api-routes-apollo-server-and-client-auth/pages/signin.js
@@ -2,7 +2,7 @@ import React from 'react'
 import Link from 'next/link'
 import { withApollo } from '../apollo/client'
 import gql from 'graphql-tag'
-import { useMutation } from '@apollo/react-hooks'
+import { useMutation, useApolloClient } from '@apollo/react-hooks'
 import Field from '../components/field'
 import { getErrorMessage } from '../lib/form'
 import { useRouter } from 'next/router'
@@ -19,6 +19,7 @@ const SignInMutation = gql`
 `
 
 function SignIn() {
+  const client = useApolloClient()
   const [signIn] = useMutation(SignInMutation)
   const [errorMsg, setErrorMsg] = React.useState()
   const router = useRouter()
@@ -36,6 +37,7 @@ function SignIn() {
           password: passwordElement.value,
         },
       })
+      client.resetStore()
       if (data.signIn.user) {
         router.push('/')
       }
diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/signout.js b/examples/api-routes-apollo-server-and-client-auth/pages/signout.js
@@ -1,6 +1,5 @@
 import React from 'react'
-import { useMutation } from '@apollo/react-hooks'
-
+import { useMutation, useApolloClient } from '@apollo/react-hooks'
 import gql from 'graphql-tag'
 import { useRouter } from 'next/router'
 import { withApollo } from '../apollo/client'
@@ -12,16 +11,18 @@ const SignOutMutation = gql`
 `
 
 function SignOut() {
+  const client = useApolloClient()
   const router = useRouter()
   const [signOut] = useMutation(SignOutMutation)
 
   React.useEffect(() => {
     if (typeof window !== 'undefined') {
       signOut().then(() => {
+        client.resetStore()
         router.push('/signin')
       })
     }
-  }, [signOut, router])
+  }, [signOut, router, client])
 
   return <p>Signing out...</p>
 }
