Apollo type defs ignored

Question

I've made a basic implementation of ApolloClient:

const gqlClient = new ApolloClient({
    connectToDevTools: true,
    link: new HttpLink({
        uri: "/api",
    }),
    cache: new InMemoryCache(),
    resolvers: {
        Group: {
            icon: () => "noIcon",
        },
    },
    typeDefs: gql`
        extend type Group {
            icon: String!
        }
    `,
});

The only fancy thing is the one resolver and type def - both of which are to support an icon field for groups (an upcoming feature).

I then try to query the server with the following:

gqlClient.query({
    query: gql`{
        groups {
            name
            icon
        }
    }`,
})
    .then(console.log);

and get a big 'ol error:

bundle.esm.js:63 Uncaught (in promise) Error: GraphQL error: Cannot query field `icon' on type `Group'.
    at new ApolloError (bundle.esm.js:63)
    at bundle.esm.js:1247
    at bundle.esm.js:1559
    at Set.forEach (<anonymous>)
    at bundle.esm.js:1557
    at Map.forEach (<anonymous>)
    at QueryManager../node_modules/apollo-client/bundle.esm.js.QueryManager.broadcastQueries (bundle.esm.js:1555)
    at bundle.esm.js:1646
    at Object.next (Observable.js:322)
    at notifySubscription (Observable.js:135)

Running the same query without asking for icon works perfectly. I'm not quite sure what I'm doing wrong. How can I mock icon and fix this error?

I'm only running Apollo Client - do I need to run Apollo Server to get all of the features? The outgoing request doesn't seem to have any of my type def information, so I'm not sure how the having Apollo server would make a difference.

Answer 1

Handling @client fields with resolvers

gqlClient.query({
    query: gql`
        {
            groups {
                name
                icon @client
            }
        }
    `,
});