How can I use Apollo Client with React Hooks for advanced state management?

How can I use Apollo Client with React Hooks for advanced state management?

You can use Apollo Client with React Hooks by utilizing the useQuery and useMutation hooks to manage your GraphQL data.

Can you give me an example of using useQuery in a component?

Sure! Here's a simple example:

import { useQuery } from '@apollo/client';
import GET_DATA from './queries';

const MyComponent = () => {
  const { loading, error, data } = useQuery(GET_DATA);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return <div>{data.items.map(item => <p key={item.id}>{item.name}</p>)}</div>;
};

What about using useMutation for updating data?

You can use useMutation like this:

import { useMutation } from '@apollo/client';
import UPDATE_DATA from './mutations';

const UpdateComponent = () => {
  const [updateData] = useMutation(UPDATE_DATA);

  const handleUpdate = async () => {
    await updateData({ variables: { id: 1, newData: 'Updated Data' } });
  };

  return <button onClick={handleUpdate}>Update Data</button>;
};