GraphQL-Pokemon

Extensive Pokémon GraphQL API!

Table of Contents

GraphQL-Pokemon
Installation
API Documentation
Usage
Meta

Query for Pokémon data using GraphQL

Key Features

Fully generated client-side TypeScript typings published to
- npm as @favware/graphql-pokemon
- GitHub Package Registry as @favware/graphql-pokemon
Docker images of the API for private hosting published to
- Dockerhub as favware/graphql-pokemon
- GitHub Package Registry as ghcr.io/favware/graphql-pokemon:latest
Provides information about various assets in Pokémon
- Pokédex
- Items
- Abilities
- Moves
- Learnsets
- Type matchups

Installation

Note: This is only needed if you are writing TypeScript, or if you're using a GraphQL schema validator. If you're using neither of these, you do not need to install this package. The package does NOT include the actual API, ONLY type information.

Install client side typings from yarn or npm:

yarn add -D @favware/graphql-pokemon

npm install -D @favware/graphql-pokemon

API Documentation

For the full documentation of the deployed version please see the GraphQL Playground on the API.

Usage

These examples are written as based on TypeScript. For JavaScript simply change out the imports to require syntax and remove any type information.

Using `Fetch`

import type { Query } from '@favware/graphql-pokemon';

interface GraphQLPokemonResponse<K extends keyof Omit<Query, '__typename'>> {
  data: Record<K, Omit<Query[K], '__typename'>>;
}

fetch('https://graphqlpokemon.favware.tech/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    query: `
      {
        getPokemon(pokemon: dragonite) {
            sprite
            num
            species
            color
        }
      }
    `
  })
})
  .then((res) => res.json() as Promise<GraphQLPokemonResponse<'getPokemon'>>)
  .then((json) => console.log(json.data));

Using `Apollo Boost`

note: for a working example see dexa

import type { Query, QueryGetFuzzyPokemonArgs } from '@favware/graphql-pokemon';
import ApolloClient from 'apollo-boost';
import fetch from 'cross-fetch';
import gql from 'graphql-tag';

type GraphQLPokemonResponse<K extends keyof Omit<Query, '__typename'>> = Record<K, Omit<Query[K], '__typename'>>;

const getFuzzyPokemon = gql`
  query getFuzzyPokemon($pokemon: String!) {
    getFuzzyPokemon(pokemon: $pokemon) {
      sprite
      num
      species
      color
    }
  }
`;

const apolloClient = new ApolloClient({
  uri: 'https://graphqlpokemon.favware.tech/',
  fetch
});

const {
  data: { getFuzzyPokemon: pokemonData }
} = await apolloClient.query<GraphQLPokemonResponse<'getFuzzyPokemon'>, QueryGetFuzzyPokemonArgs>({
  query: getFuzzyPokemon,
  variables: { pokemon: 'dragonite' }
});

console.log(pokemonData);

Using `Apollo Client React`

// ApolloClient setup
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';

// Instantiate required constructor fields
const cache = new InMemoryCache();
const link = new HttpLink({
  uri: 'https://graphqlpokemon.favware.tech/'
});

export const client = new ApolloClient({
  // Provide required constructor fields
  cache: cache,
  link: link,

  // Provide some optional constructor fields
  name: 'graphql-pokemon-client',
  version: '1.0',
  queryDeduplication: false,
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'cache-and-network'
    }
  }
});

// Component
import React from 'react';
import gql from 'graphql-tag';
import { useQuery } from '@apollo/react-hooks';
import type { Query } from '@favware/graphql-pokemon';
import { client } from './ApolloClient';

interface GraphQLPokemonResponse<K extends keyof Omit<Query, '__typename'>> {
  data: Record<K, Omit<Query[K], '__typename'>>;
}

const GET_POKEMON_DETAILS = gql`
  {
    getPokemon(pokemon: dragonite) {
      sprite
      num
      species
      color
    }
  }
`;

export const Pokemon: React.FC = () => {
  const { loading, error, data } = useQuery<GraphQLPokemonResponse<'getPokemon'>>(GET_POKEMON_DETAILS, {
    client: client
  });

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return <div> Insert how you want to display the data here </div>;
};

Meta

License

Buy us some doughnuts

Favware projects is and always will be open source, even if we don't get donations. That being said, we know there are amazing people who may still want to donate just to show their appreciation. Thank you very much in advance!

We accept donations through Ko-fi, Paypal, Patreon, GitHub Sponsorships, and various crypto currencies. You can use the buttons below to donate through your method of choice.

Donate With	Address
Ko-fi	Click Here
Patreon	Click Here
PayPal	Click Here
GitHub Sponsors	Click Here
Bitcoin	`1E643TNif2MTh75rugepmXuq35Tck4TnE5`
Ethereum	`0xF653F666903cd8739030D2721bF01095896F5D6E`
LiteCoin	`LZHvBkaJqKJRa8N7Dyu41Jd1PDBAofCik6`

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Jeroen Claassens} 🐛 💻 🎨 💡 🤔 🚇 🚧 📦 📆 👀 💬 🛡️ ⚠️ 📓	_{Favware Bot} 💻 🚧	_Imgbot 🚧	_{dependabot-preview[bot]} 🚧	_depfu[bot] 🚧	_Kaoru 💻 🚧	_Emily 💻
_{Ed L} 💻	_nandhagk 💻	_{dependabot[bot]} 🚧	_{github-actions[bot]} 🚧	_{allcontributors[bot]} 📖	_Kaname ⚠️