Table of Contents
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
- npm as
- 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
- Dockerhub as
- Provides information about various assets in Pokémon
- Pokédex
- Items
- Abilities
- Moves
- Learnsets
- Type matchups
Install client side typings from yarn or npm:
yarn add -D @favware/graphql-pokemonnpm install -D @favware/graphql-pokemonInstall client side typings from NuGet.
Search Favware.Graphqlpokemon in your NuGet manager and install it from there
For the full documentation of the deployed version please see the GraphQL Playground on the API.
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>;
};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;
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent