Help understanding caching

[pattruong]

Hi, I'm trying to understand urql's caching strategy better. I understand the concept where you have a query and a subsequent mutation on the same type will cause a background update. However, my understanding is that making the exact same query will also return a cached result.

I tried a basic example where I'm toggling a component that makes a query to get a single user information (in the form of an array of 1 object).

query {
  barista { 
    id
    email
    display_name
    avatar
    created_on
  }
}

However, when I toggle the component with the query, I'm seeing that cache reported a miss on the urql devtool.

This is despite the query being exactly the same. Is it the case that unmounting a component clears the cache for that typename? I'm not super clear on what urql teardown does exactly.

Code for reference:
App.js

import logo from './logo.svg';
import './App.css';
import { useState, useEffect } from 'react';
import { createClient, Provider as UrqlProvider, dedupExchange, cacheExchange, fetchExchange } from 'urql';
import { authExchange } from '@urql/exchange-auth';
import { devtoolsExchange } from '@urql/devtools';
import axios from 'axios';
import { AUTH_API, GRAPHQL_API } from 'config';
import Login from 'Login';
import Barista from 'Barista';

const getTokenFromRefresh = async () => {
  try {
    const { status, data } = await axios.post(AUTH_API + '/refresh-token', null, { withCredentials: true });
    if (status === 200) {
      return {
        ok: true,
        token: data.token
      }
    }
    return { ok: false };
  } catch (err) {
    console.error(err);
    return { ok: false };
  }
}

function App() {
  const [token, setToken] = useState(null);
  const [show, setShow] = useState(false);

  useEffect(() => {
    const initialize = async () => {
      if (localStorage.getItem('hasLoggedIn') === 'yes') {
        const { ok, ...data } = await getTokenFromRefresh();

        if (ok) {
          setToken(data.token);
        }
      }
    }
    initialize();
  }, [])

  const client = createClient({
    url: GRAPHQL_API,
    exchanges: [
      devtoolsExchange,
      dedupExchange,
      cacheExchange,
      authExchange({
        getAuth: async ({ authState }) => {
          if (!authState) {
            if (token) {
              return { token };
            }
            return null;
          }
          const { ok, ...data } = await getTokenFromRefresh();

          if (ok) {
            setToken(data.token);
            return { token: data.token }
          }

          // This is where auth has gone wrong and we need to clean up and redirect to a login page
          //  LOGOUT STUFF

          return null;
        },
        addAuthToOperation: ({
          authState,
          operation,
        }) => {
          if (!authState || !authState.token) {
            return operation;
          }
          const fetchOptions =
            typeof operation.context.fetchOptions === 'function'
              ? operation.context.fetchOptions()
              : operation.context.fetchOptions || {};
          return {
            ...operation,
            context: {
              ...operation.context,
              fetchOptions: {
                ...fetchOptions,
                headers: {
                  ...fetchOptions.headers,
                  "Authorization": `Bearer ${authState.token}`,
                },
              },
            },
          };
        },
        didAuthError: ({ error }) => {
          const hasError = error.graphQLErrors.some(e => e.extensions?.code === 'invalid-jwt');
          return hasError;
        },
      }),
      fetchExchange,
    ],
  })


  return (
    <UrqlProvider value={client}>
      <div className="App">
        <img src={logo} className="App-logo" alt="logo" />
        <Login setToken={setToken} />
        <div>
          <button onClick={() => setShow(!show)}>Toggle Query</button>
          {show && <Barista />}
        </div>
      </div>
    </UrqlProvider>
  );
}

export default App;

Barista.js

import { useQuery } from 'urql';

function Barista() {
  const [{ data, fetching }] = useQuery({
    query: `
      query {
        barista { 
          id
          email
          display_name
          avatar
          created_on
        }
      }
    `
  });

  if (fetching) return <div>fetching...</div>;

  const { id, email, display_name } = data.barista[0];
  return (
    <div>
      <h1>{id}</h1>
      <h1>{email}</h1>
      <h1>{display_name}</h1>
    </div>
  )
}
export default Barista;

Thanks for any help!

[JoviDeCroock]

The default cache will clear the invalidated result while it refetches, this to avoid showing stale data. This can be avoided by using a normalized cache like @urql/exchange-graphcache, with a normalized cache you can react to mutation results yourself.

If you would visit this page twice without a mutation you'd see a cache-hit

[pattruong]

If you would visit this page twice without a mutation you'd see a cache-hit

Just to clarify, is this in reference to the default cache or to with a normalized cache?

Also wanted to confirm how I'm reading the urql devtool UI:

Is this considered a cache hit? I couldn't find the same metadata field cacheOutcome on this second marker (I checked the various buttons available on the second marker)

Steps I took:

• fetched my query on / page
• changed route to /test page
• changed route back to / page (new marker on devtool)

Thanks for the help!

[kitten]

This is all in reference to the document cache, so the default cache. The normalized cache (Graphcache) never actually invalidates automatically. It's a lot clearer when you cross-check what you're seeing the urql devtools against the network tab. This way you'll build up an intuition of what's going on with the actual requests, since with the default cache there are only two outcomes: cached document or uncached => fetch.

I personally can't really identify what you're looking for by one screenshot, but the devtools attempt to specifically mark when fetching starts and ends, everything else are additional events. But it's worth noting that those sometimes don't tell the whole story, since there may be more debugging events (or less) than operations / logic that's going on behind the scenes.

However with the document cache there are only a couple of scenarios (https://formidable.com/open-source/urql/docs/basics/document-caching/)

• The query is uncached, it'll be fetched, the result is asynchronous
• The query is cached, the result will be returned synchronously
• A mutation invalidates the query, then it'll be fetched in the background
• A hook uses cache-and-network or otherwise triggers a new fetch, which invalidates the old cached result, the result is asynchronous
• The query is run while it's already been triggered, the new query waits for the result asynchronously, when it's executed twice, as it has been invalidated and a network request is in flight

[pattruong]

Got it, thanks for the explaining the details, it helps clear up a lot.

If I reference the network tab, I can confirm that it is working using cached results.

I think my confusion was inspecting the green markers (fetch request) in urql devtools, I got this subfield:

 context: {
  url: "graphql-url",
  fetchOptions: {
    headers: {
      Authorization: "Bearer {token here}"
    }
  },
  preferGetMethod: false,
  requestPolicy: "cache-first",
  suspense: false,
  meta: {
    cacheOutcome: "miss"
  },
  authAttempt: false
}

and upon the second query calls to the cached results, I only saw what was in the screenshot I posted above which didn't show any mention of a cacheOutcome: "hit".

[kitten]

Ah, I see. I believe we can attempt to double-check whether the urql devtools clearly highlight this consistently, but if they aren't that's indeed a little confusing. The Explorer tab may help here. That one shows the cache state more consistently, but it does show you all data in one view, so it's more information that isn't specific to operations and components.