Skip to content
Branch: master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.

README.md

logo

GraphQL-Pokemon

Extensive Pokemon GraphQL API!


Table of Contents


Project Status

GitHub Continuous Deployment Continuous Integration Automatic Data Update

Social Media and Donations

Join Discord server Twitter Follow Patreon Donate PayPal Donate

Typings

npm nuget


Query for Pokemon data using GraphQL

Key Features

  • Fully generated client-side TypeScript typings published to
  • Fully generated client-side .NET Core typings published to nuget
  • Docker images of the API for private hosting published to
  • Provides information about various assets in Pokémon
    • Pokédex
    • Items
    • Abilities
    • Moves
    • Learnsets
    • Type matchups

Installation

NodeJS

Install client side typings from yarn or npm:

yarn add -D @favware/graphql-pokemon
npm install -D @favware/graphql-pokemon

.NET Core

Install client side typings from NuGet.

Search Favware.Graphqlpokemon in your NuGet manager and install it from there


API Documentation

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

Usage

NodeJS

With browser Fetch API or node-fetch

import { 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: `
      {
        getPokemonDetails(pokemon: dragonite skip: 0 take: 2 reverse: true) {
            sprite
            num
            species
            color
        }
      }
    `
  })
})
  .then((res) => res.json() as GraphQLPokemonResponse<'getPokemonDetails'>)
  .then((json) => console.log(json.data));

With 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 { 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`
  {
    getPokemonDetails(pokemon: dragonite, skip: 0, take: 2, reverse: true) {
      sprite
      num
      species
      color
    }
  }
`;

export const Pokemon: React.FC = () => {
  const { loading, error, data } = useQuery<GraphQLPokemonResponse<'getPokemonDetails'>>(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>;
};

.NET Core

More can be added here in due time, this is open for contribution by someone who is more familiarized with .NET.

using GraphQLCodeGen;

namespace MyProject.Consumer
{
  public class GraphqlConsumer
  {
    private Graphqlpokemon.Abilities Abilities;
  }
}

Meta

License

Copyright © 2019, Favware. Released under the MIT License.

Buy us a donut

Favware projects are open source and always will be, even if there are no donations. That said, we also know there are people out there that may still want to donate just to show their appreciation so this is for you guys. Thanks in advance!

You can contribute in a multitude of ways:

You can’t perform that action at this time.