Query not firing

[addstar34]

Hi,

I have a Nav component that I render on every page which has a query to get the current logged in user. I also have an accounts page which fires a similar query to the one in the Nav component but with more fields. From the sign in page (this page also renders the nav) I click sign in and then navigate to the accounts page but the query to get the current user doesn't fire 🤷‍♂️

If I set the requestPolicy to cache-and-network it will fire but I don't understand why it wont fire with the default requestPolicy of 'cache-first' as the documentation states cache-first (the default) prefers cached results and falls back to sending an API request when no prior result is cached. So the cache should be empty but on top of that the queries aren't exactly the same so it should fire anyways. I'm using the graphcache not the default document cache.

Here's my code, any help is appreciated 🙏

Nav component:

import Link from 'next/link'
import { useQuery } from 'urql'

const queryCurrentUser = `
  query {
    currentUser {
      id
    }
  }
`

function Nav() {
  const [{ data, fetching, error }] = useQuery({ query: queryCurrentUser })

  return (
    <nav>
      {data?.currentUser && <h1>Welcome {data?.currentUser?.id}</h1>}
      <ul>
        <li><Link href='/'><a>home</a></Link></li>
        <li><Link href='profiles'><a>profiles</a></Link></li>
        <li><Link href='register'><a>register</a></Link></li>
        <li><Link href='account'><a>account</a></Link></li>
        <li><Link href='sign-in'><a>sign in</a></Link></li>
      </ul>
    </nav>
  )
}

export default Nav

Account page:

import { useCallback, useMemo } from 'react'
import { useQuery } from 'urql'
import Nav from '../components/nav'

const queryCurrentUser = `
  query {
    currentUser {
      id
      email
    }
  }
`

function AccountPage() {
  const [{ data, fetching, error }] = useQuery({ query: queryCurrentUser })

  return (
    <>
      <Nav />

      <main>
        <h1>Account {data?.currentUser ? data?.currentUser?.email : ''}</h1>
      </main>
    </>
  )
}

export default AccountPage

Sign in page:

import { useMutation } from 'urql'

import Nav from '../components/nav'
import { setToken } from '../lib/auth/utils'

const mutationSignIn = `
  mutation ($email:  String!, $password: String!) {
    signin (email: $email, password: $password) {
      token
      user {
        id
      }
    }
  }
`

function SignInPage() {
  const [signInResult, signIn] = useMutation(mutationSignIn)

  async function onSubmit(e) {
    e.preventDefault()

    const values = Object.fromEntries(new FormData(e.target))

    const response = await signIn(values)
    
    if (response.error) {
      // TODO: handle errors
      return
    }
    setToken(response.data.signin.token)
  }

  return (
    <>
      <Nav />

      <main>
        <h1>Sign In</h1>

        <form onSubmit={onSubmit}>
          <label htmlFor='email'>Enter your email</label>
          <input name='email' type='email' />

          <label htmlFor='password'>password</label>
          <input name='password' type='password' />

          <button type='submit'>Sign in</button>
        </form>
      </main>
    </>
  )
}

export default SignInPage

[kitten]

Ok, so are you using the default cache or Graphcache? And is this rendering as you expect?

<h1>Account {data?.currentUser ? data?.currentUser?.email : ''}</h1>

If it is then you may have a cache hit depending on your cache. Maybe the request has already been fulfilled before? Maybe if you're using Graphcache then the fields are already cached?

The urql-devtools could help you understand the condition, but I don't really have enough context to explain what exactly your app is querying here

[addstar34]

I'm not sure what happened here but it's working now ☺️ thanks Phil.