Solution & Next Steps - Thinkster

Outline

In this video, I show you how to add more data to our query and add it to the UI.

First, we can check out GraphQL Playground and update our query to this:

// App.js
const HABITS_QUERY = gql`
  query HABITS_QUERY {
    habits {
      id
      description
      points
      entries {
        id
        notes
        date
        completed
      }
    }
  }
`;

Then, we can update the UI to display that new data:

function App() {
  const { data, loading, error } = useQuery(HABITS_QUERY);

  if (loading) {
    return <p>loading...</p>;
  }

  if (error) {
    return <p>Ruh roh! {error.message}</p>;
  }

  return (
    <>
      <h2>Habits</h2>
      <ul>
        {data.habits.map((habit) => {
          return (
            <li key={habit.id}>
              {`${habit.description} (${habit.points} points)`}
              <ul>
                {habit.entries &&
                  habit.entries.map((entry) => {
                    const date = new Date(entry.date).toLocaleDateString();
                    const completed = entry.completed ? "✅" : "😑";
                    return (
                      <li
                        key={entry.id}
                      >{`${date}: ${entry.notes} (${completed})`}</li>
                    );
                  })}
              </ul>
            </li>
          );
        })}
      </ul>
    </>
  );
}

export default App;

You're now set up to really get going with Apollo. But what about adding habits or entries? Or modifying or deleting them? We'll tackle that in the next tutorial!

Go Pro to unlock all content & remove ads

I finished! On to the next tutorial

Next: Fetching & Updating Data Boost Your React App with Apollo: Fetching & Updating Data