Favware.Graphqlpokemon 0.0.1

GraphQL-Pokemon

Expansive Pokemon GraphQL API!

Table of Contents

• Installation
  • NodeJS
  • .NET Core
• API Documentation
• Usage
  • NodeJS
    • With browser [Fetch API] or [node-fetch]
    • With [Apollo Client React]
  • .NET Core

Project Status

Social Media and Donations

Typings

Query for Pokemon 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
• Fully generated client-side .NET Core typings published to nuget
• Docker images of the API for private hosting published to
  • Dockerhub as favware/graphql-pokemon
  • GitHub Package Registry as docker.pkg.github.com/favware/graphql-pokemon/graphql-pokemon
  • Google Cloud Container Registry as gcr.io/data-sunlight-146313/graphql-pokemon:latest
• 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://favware.tech/api', {
  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://favware.tech/api'
});

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 will be added here in due time, once I get more familiarized with .NET. Or if anyone wants to contribute usage then please do

using GraphQLCodeGen;

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