'How to modify @client field in apollo client?

I’m trying to update @client field, but without luck. Please, give me a hand what I’m doing wrong?

App.tsx

const client = new ApolloClient({
  cache: new InMemoryCache({typePolicies: {
      Question: {
          fields: {
              path: {
                  read(existing) {
                      return existing ? existing : null;
                  },
                  merge: true
              }
          }
      }
      }}),
  link: new HttpLink({uri: 'http://localhost:3000/graphql'}),
});


export const  App = () => {
  return (
      <ApolloProvider client={client}>
        <div>
          <MyComp />
        </div>
      </ApolloProvider>
  );
}

MyComp.tsx

const query = gql`
    query questions {
        questions {
            id
            path @client
        }
    }
`;

export const MyComp = () => {
    const apolloClient = useApolloClient();
    const {data} = useQuery(query);

    const buttonClickHandler = () => {
        apolloClient.cache.modify({
            id: apolloClient.cache.identify({ __typename: 'Question', id: '1' }),
            fields: {
                path: () => {
                    return 'new value';
                }
            },
            broadcast: true
        });
    };

    return (
        <div>
            <p>{JSON.stringify(data?.questions, null, 2)}</p>

            <button onClick={buttonClickHandler}>Update Path</button>
        </div>
    );
};

I expect to see output:

[ { "__typename": "Question", "id": "1", "path": "new value" } ]

But see:

[ { "__typename": "Question", "id": "1", "path": null } ]



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source