@apollo/client local-only field is not resolved when working with service worker

Help
1

I have problems getting local-only fields via typePolicies to work in my app. My setup is the following:

This is one of my queries:

export const GET_ALL_DEBT_TOKENS = gql`
  query GetDebtTokens {
    getDebtTokens {
      totalSupplyUSD
      totalReserve
      totalReserve24hAgo

      token {
        address
        symbol
        priceUSD @client
        priceUSD24hAgo
      }
    }
  }
`;

And this is the config to resolve my local field:

export function CustomApolloProvider({ children }: PropsWithChildren<{}>) {
  const client = new ApolloClient({
    // TODO: replace with your own graphql server
    uri: 'https://flyby-router-demo.herokuapp.com/',

    cache: new InMemoryCache({
      typePolicies: {
        Token: {
          fields: {
            priceUSD: {
              read() {
                console.log('priceUSD read function is called');
                return 100;
              },
            },
          },
        },
      },
    }),
  });

  return <ApolloProvider client={client}>{children}</ApolloProvider>;
}

This is the relevant schema:


type Token {
  address: String! # contract address, used as id
  symbol: String!
  createdAt: String!
  #
  priceUSD24hAgo: Float!
  #
  isPoolToken: Boolean!
}

type DebtTokenMeta {
  token: Token!
  # borrower specific
  walletAmount: Float
  troveMintedAmount: Float
  stabilityLostAmount: Float
  stabilityCompoundAmount: Float

  # global
  stabilityDepositAPY: Float!
  totalDepositedStability: Float!
  totalReserve: Float!
  totalReserve24hAgo: Float!
  totalSupplyUSD: Float!
  totalSupplyUSD24hAgo: Float!
}

My dev server returns everything except the “priceUSD” field. I also never see that log in the console. I am wondering how I can mess up this simple get-started guide.
The field marked with “@client” is not in the query to my Mock Service Worker. I wonder if it is the mock service worker that is causing the issue or a simple mistake by me.

2

The @client annotation means “we get that from a typePolicy, don’t request this field from the server” so it seems correct that this will never be sent as part of your request - to the server or mock service worker.

I’m honestly not sure what problem you encounter in this case - could you please go into your actual problem a little more? What behaviour do you expect, and what do you see instead?

3

Thanks @lenz that you care about my issue.
Yes, this far it is expected, that the field is left from the API request. It just doesn’t happen, that the typePolicy for my field is considered.

This is one of the responses I have:

{
  "token": {
    "id": "908fd53a-cb88-432b-8c2d-1fbcec500a8a",
    "address": "578b9a18-7b07-4028-8354-7861f78b22ea",
    "symbol": "CUP",
    "createdAt": "2023-09-07T16:13:40.183Z",
    "priceUSD24hAgo": 2467.94,
    "isPoolToken": false
  },
  "walletAmount": null,
  "troveMintedAmount": null,
  "stabilityLostAmount": null,
  "stabilityCompoundAmount": null,
  "totalDepositedStability": 4310.92,
  "totalReserve": 0,
  "totalReserve24hAgo": 0,
  "totalSupplyUSD": 11552.7,
  "totalSupplyUSD24hAgo": 16380.9,
  "stabilityDepositAPY": 0.1
}

This is not the response from the mock service worker but my logged value from useQuery. This is the symptom of the same issue that I “dont see the console.log from my typePolicy”. The typePolicy for “priceUSD” is not used to resolve the @client field somehow.

I have tried to follow the guide on local-only fields to the best of my abilities.

4

Does your API response contain a __typename?
Without that, the cache won’t be able to figure out if this is a Token instance.

If that’s the case: is __typename really "Token" here or some kind of inherited class?

5

Dude, that was it. I already added an id that was missing but I forgot about the typename. It often gets included when using Apollo tools :')
Danke Mann, du bist mein Held des Tages!

6

Bitte bitte - gern geschehen!