Guided Mini Project 1 - React with GraphQL - GraphQL Blog Explorer - Querying Data from GraphQLZero using Apollo Client

[akash-coded]

This is a guided mini-project that demonstrates how to query data from a GraphQL API using React and Apollo Client, specifically utilizing the https://graphqlzero.almansi.me/ mock API. This project will focus solely on querying data, providing learners with hands-on experience in integrating GraphQL into a React application.

Project: GraphQL Blog Explorer

In this mini-project, we'll create a simple blog explorer that fetches and displays posts and their associated users using GraphQL queries.

Step 1: Set up the project

First, let's create a new React project and install the necessary dependencies:

npx create-react-app graphql-blog-explorer
cd graphql-blog-explorer
npm install @apollo/client graphql

Step 2: Set up Apollo Client

Create a new file src/apolloClient.js and add the following code:

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://graphqlzero.almansi.me/api',
  cache: new InMemoryCache()
});

export default client;

This sets up our Apollo Client to connect to the GraphQLZero API [citation:1].

Step 3: Wrap the app with ApolloProvider

In src/index.js, wrap the App component with ApolloProvider:

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider } from '@apollo/client';
import App from './App';
import client from './apolloClient';

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Step 4: Create the PostList component

Create a new file src/components/PostList.js:

import React from 'react';
import { useQuery, gql } from '@apollo/client';

const GET_POSTS = gql`
  query GetPosts {
    posts(options: { paginate: { page: 1, limit: 10 } }) {
      data {
        id
        title
        user {
          name
        }
      }
    }
  }
`;

function PostList() {
  const { loading, error, data } = useQuery(GET_POSTS);

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

  return (
    <div>
      <h2>Recent Posts</h2>
      <ul>
        {data.posts.data.map(post => (
          <li key={post.id}>
            {post.title} by {post.user.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default PostList;

This component uses the useQuery hook to fetch a list of posts with their titles and associated user names.

Step 5: Create the UserDetails component

Create a new file src/components/UserDetails.js:

import React from 'react';
import { useQuery, gql } from '@apollo/client';

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      name
      email
      phone
      website
    }
  }
`;

function UserDetails({ userId }) {
  const { loading, error, data } = useQuery(GET_USER, {
    variables: { id: userId },
  });

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

  const { name, email, phone, website } = data.user;

  return (
    <div>
      <h3>{name}</h3>
      <p>Email: {email}</p>
      <p>Phone: {phone}</p>
      <p>Website: {website}</p>
    </div>
  );
}

export default UserDetails;

Let's continue with our GraphQL Blog Explorer project.

Step 6: Update the App component

Now, let's update the src/App.js file to incorporate our new components:

import React, { useState } from 'react';
import PostList from './components/PostList';
import UserDetails from './components/UserDetails';

function App() {
  const [selectedUserId, setSelectedUserId] = useState(null);

  return (
    <div className="App">
      <h1>GraphQL Blog Explorer</h1>
      <div style={{ display: 'flex' }}>
        <div style={{ flex: 1 }}>
          <PostList onSelectUser={setSelectedUserId} />
        </div>
        <div style={{ flex: 1 }}>
          {selectedUserId && <UserDetails userId={selectedUserId} />}
        </div>
      </div>
    </div>
  );
}

export default App;

This setup creates a two-column layout with the post list on the left and user details on the right.

Step 7: Update the PostList component

Let's modify the PostList component to allow user selection:

import React from 'react';
import { useQuery, gql } from '@apollo/client';

const GET_POSTS = gql`
  query GetPosts {
    posts(options: { paginate: { page: 1, limit: 10 } }) {
      data {
        id
        title
        user {
          id
          name
        }
      }
    }
  }
`;

function PostList({ onSelectUser }) {
  const { loading, error, data } = useQuery(GET_POSTS);

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

  return (
    <div>
      <h2>Recent Posts</h2>
      <ul>
        {data.posts.data.map(post => (
          <li key={post.id}>
            {post.title} by{' '}
            <button onClick={() => onSelectUser(post.user.id)}>
              {post.user.name}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default PostList;

This update adds a button for each user, allowing the learner to select a user and view their details [citation:3][citation:5].

Step 8: Add a search feature

To demonstrate more complex querying, let's add a search feature to our PostList component:

import React, { useState } from 'react';
import { useQuery, gql } from '@apollo/client';

const SEARCH_POSTS = gql`
  query SearchPosts($query: String!) {
    posts(options: { search: { q: $query }, paginate: { page: 1, limit: 10 } }) {
      data {
        id
        title
        user {
          id
          name
        }
      }
    }
  }
`;

function PostList({ onSelectUser }) {
  const [searchQuery, setSearchQuery] = useState('');
  const { loading, error, data } = useQuery(SEARCH_POSTS, {
    variables: { query: searchQuery },
  });

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

  return (
    <div>
      <h2>Search Posts</h2>
      <input
        type="text"
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
        placeholder="Search posts..."
      />
      <ul>
        {data.posts.data.map(post => (
          <li key={post.id}>
            {post.title} by{' '}
            <button onClick={() => onSelectUser(post.user.id)}>
              {post.user.name}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default PostList;