1. How to Filter Pokemon with GatsbyJS Using Search and Dropdown Options

In this tutorial, we will be using GatsbyJS to create a simple web application that allows users to filter Pokemon based on their search query and using a dropdown to select a specific type of Pokemon. This tutorial assumes you have some basic knowledge of GatsbyJS and React.

Step 1: Set up a new Gatsby project

First, make sure you have Node.js installed on your computer. Then, install the Gatsby CLI by running the following command:

npm install -g gatsby-cli

Next, create a new Gatsby project by running the following command:

gatsby new pokemon-filter-app

Navigate to the project directory:

cd pokemon-filter-app

Start the development server:

gatsby develop

Open your browser and navigate to http://localhost:8000 to see your new Gatsby project.

Step 2: Install the required dependencies

In order to filter Pokemon based on the search query and dropdown selection, we will need to install the graphql and @apollo/client packages. Run the following command to install the required dependencies:

npm install @apollo/client graphql

Step 3: Fetch Pokemon data using GraphQL

Create a new file in the src directory called pokemon.js and add the following code:

import { gql } from '@apollo/client';

export const GET_POKEMON = gql`
  query GetPokemon {
    pokemons(limit: 151) {
      id
      name
      image
      types
    }
  }
`;

This GraphQL query fetches the first 151 Pokemon with their IDs, names, images, and types.

Step 4: Create a Pokemon component

Create a new file in the src/components directory called Pokemon.js and add the following code:

import React from 'react';

const Pokemon = ({ pokemon }) => {
  return (
    <div>
      <img src={pokemon.image} alt={pokemon.name} />
      <h3>{pokemon.name}</h3>
      <p>{pokemon.types.join(', ')}</p>
    </div>
  );
};

export default Pokemon;

This component takes a pokemon object as a prop and displays the Pokemon’s image, name, and types.

Step 5: Create the PokemonList component

Create a new file in the src/components directory called PokemonList.js and add the following code:

import React from 'react';
import Pokemon from './Pokemon';

const PokemonList = ({ pokemons }) => {
  return (
    <div>
      {pokemons.map((pokemon) => (
        <Pokemon key={pokemon.id} pokemon={pokemon} />
      ))}
    </div>
  );
};

export default PokemonList;

This component takes a list of pokemons as a prop and renders the Pokemon component for each Pokemon in the list.

Step 6: Create a SearchBar component

Create a new file in the src/components directory called SearchBar.js and add the following code:

import React from 'react';

const SearchBar = ({ handleSearch }) => {
  const handleChange = (event) => {
    handleSearch(event.target.value);
  };

  return (
    <input
      type="text"
      placeholder="Search Pokemon"
      onChange={handleChange}
    />
  );
};

export default SearchBar;

This component takes a handleSearch function as a prop and renders an input field for users to enter their search query.

Step 7: Create a Dropdown component

Create a new file in the src/components directory called Dropdown.js and add the following code:

import React from 'react';

const Dropdown = ({ types, handleFilter }) => {
  const handleChange = (event) => {
    handleFilter(event.target.value);
  };

  return (
    <select onChange={handleChange}>
      {types.map((type) => (
        <option key={type} value={type}>
          {type}
        </option>
      ))}
    </select>
  );
};

export default Dropdown;

This component takes a list of types and a handleFilter function as props, and renders a dropdown menu for users to select a specific type of Pokemon.

Step 8: Integrate the components in the main App component

Update the Layout.js file in the src/components directory to include the SearchBar and Dropdown components:

import React, { useState } from 'react';
import { useQuery } from '@apollo/client';
import { GET_POKEMON } from '../pokemon';
import PokemonList from './PokemonList';
import SearchBar from './SearchBar';
import Dropdown from './Dropdown';

const Layout = () => {
  const { loading, error, data } = useQuery(GET_POKEMON);
  const [searchTerm, setSearchTerm] = useState('');
  const [filterType, setFilterType] = useState('');

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;

  const pokemons = data.pokemons.filter((pokemon) =>
    pokemon.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  if (filterType) {
    pokemons = pokemons.filter((pokemon) =>
      pokemon.types.includes(filterType)
    );
  }

  const types = [...new Set(data.pokemons.flatMap((pokemon) => pokemon.types))];

  return (
    <div>
      <SearchBar handleSearch={setSearchTerm} />
      <Dropdown types={types} handleFilter={setFilterType} />
      <PokemonList pokemons={pokemons} />
    </div>
  );
};

export default Layout;

This component fetches Pokemon data using the useQuery hook, filters the Pokemon based on the search term and dropdown selection, and then renders the SearchBar, Dropdown, and PokemonList components.

Step 9: Update the index.js file in the src/pages directory to use the Layout component:

import React from 'react';
import Layout from '../components/Layout';

const IndexPage = () => {
  return <Layout />;
};

export default IndexPage;

Step 10: Style the components with CSS

Create a new file in the src/components directory called styles.css and add the following CSS code to style the components:

input {
  padding: 0.5rem;
  margin-bottom: 1rem;
}

select {
  padding: 0.5rem;
  margin-bottom: 1rem;
}

img {
  max-width: 100%;
}

h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

p {
  margin-bottom: 1rem;
}

Step 11: Test the application

Navigate to http://localhost:8000 in your browser to see the Pokemon filter application in action. You can enter a search query in the input field to filter the Pokemon by name and select a type from the dropdown menu to filter the Pokemon by type.

Congratulations! You have successfully created a Pokemon filter application using GatsbyJS. Feel free to customize and expand upon this application to add more features and functionality.