GraphQL server example  

  GraphQL  NodeJS   Dec 5, 2020  No Comments

The goal of this exercise was for me to investigate/discover how hard/easy it would be to start using GraphQL.

Lets create an Apollo Server with NodeJS so we can play with GraphQL. The server will distribute data retrieved from the nintendo eshop (cause why not ¯\_(ツ)_/¯).

Quick setup

Create the project

mkdir graphql-server-example
cd graphql-server-example

Initialise NodeJS

npm init --yes

Add the dependencies

npm install apollo-server-express express

Create the base code

Copy/paste the following into an index.js file.

const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');
 
const typeDefs = gql`
  type Query {
    hello: String
  }
`;
 
const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
};
 
const server = new ApolloServer({ typeDefs, resolvers });
 
const app = express();
server.applyMiddleware({ app });
 
app.listen({ port: 3006 }, () =>
  console.log('Now browse to http://localhost:3006' + server.graphqlPath)
);

Run node index.js and you’ll have access to GraphQL Playground at http://localhost:3006/graphql

Lets play

Lets define our types now. So we need to add a type to our typeDefs:

type Game {
  id: String
  name: String
  releaseDate: String
}

And we need to change our Query to return a list of games:

type Query {
  games: [Game]!
}

For this to work we obviously need to do a http request in order to get all titles. That’s when we need to define a datasource (doc here).

First install apollo-datasource-rest:

npm install apollo-datasource-rest
const { RESTDataSource } = require('apollo-datasource-rest');

class EshopAPI extends RESTDataSource {
  constructor() {
    super();
    this.baseURL = 'https://ec.nintendo.com/api/GB/en/';
  }

  async getAllGames() {
    const { contents } = await this.get('search/sales', {
      "count": 10,
      "offset": 0,
    });
    return Array.isArray(contents) ? contents.map(game => ({
      id: game.id || 0,
      name: game.formal_name,
      releaseDate: game.release_date_on_eshop
    })) : [];
  }
}

module.exports = EshopAPI;

Now go back to the main file to specify it in the ApolloServer constructor:

const dataSources = () => ({ eshopAPI: new EshopAPI() });
const server = new ApolloServer({ typeDefs, resolvers, dataSources });

And now you can get the list of games:

If you want more GraphQL example, look at the SpaceX tutorial which uses a REST API and a SqlLite DB.


Simple calendar component for React  

  React   Oct 5, 2018  No Comments

First here is the repository on github and the demo page.

Why a new component?

Quite simple answer, I needed a calendar that could be customized easily for multiple small projects.

This component handles the display of the calendar, and you can give it a custom element for the cells and/or the title (meaning name of the days). You could also don’t use this custom component and just display the date (for a date picker for example - see below).

The main callback is onDateSelected which will be called - as you would guess - when a cell has been clicked with the date as parameter, so you can do anything, like displaying a modal to create lets say an event.

More information on the documentation.

Quick demo

function DatePicker() {
	var date = new Date('08/05/2018');
	return (
		<div>
			<div>
				{/* you could add buttons to navigate between months */}
				<h1>August</h1>
			</div>
			<Calendar
				className="minimal-calendar"
				currentMonth={date}
				onDateSelected={date => console.log(date)}
				cellContainerStyle=
				showMonthName={false}
				titleComponent={CustomTitleCell}
			/>
		</div>
	);
}


Create a node module with Haxe  

  Haxe  NodeJS   Mar 4, 2017  No Comments

In this post, I’m not going to talk about npm (except for the initialisation part), but about how to code your module with Haxe.

Project setup

First thing to do is to create our npm project.

npm init --yes

--yes because I’m lazy and I don’t want to enter the default value for each prompt.

My default package.json file looks like:

{
  "name": "test-node-package",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "build": "haxe build.hxml",
    "dev": "npm run build -- -debug"
  },
  "keywords": [],
  "author": "RevoluGame",
  "license": "ISC",
  "files": ["dist"]
}

The files parameter will tell npm which file/directory to import while installing the module. I only specify the dist directory, because for a production usage, the Haxe sources are not needed. But still, if you want to publish everything, just forget about the files parameter.

My project looks like:

- test-node-package
  - dist
    - index.js
  - src
    - Main.hx
  - package.json
  - build.hxml

The Haxe part

Now that we have our project setup, we can start working on our module.

Let’s say we want to do the following in another project:

var test = require('test-node-package');
test.foo("world");

In Haxe you will have to:

class Main
{
    @:expose("foo")
    public static function foo(bar: String)
    {
        trace('Hello $bar');
    }

    public static function main() {}
}

The @expose metadata will make your method available in Javascript with the name you specified (in our case: foo).

You will probably need to use the nodejs lib, so don’t forget to add it in your build.hxml:

-lib hxnodejs


Haxe React - tic tac toe example  

  Haxe   Feb 6, 2017  No Comments

I’ve ported the tic-tac-toe example from the react-js documentation to haxe. You can find it here.

What is different:

I’ve changed the event handling in order to use msignal instead of passing a function down to the right component.

I’ve created an History/HistoryItem component to get a cleaner code.

To test it, just checkout the repo, install the dependancies:

And build the app.


Pico8 tools for haxe  

  Haxe  Pico-8   Oct 23, 2016  No Comments

I’m prototyping a lot for the Pico-8 console with haxe (using the hxpico8 library), so in order to help my productivity, I’ve built some tools.

What for?

The first aim was to initialize a new project quickly so you don’t lose time and you can start coding right away.

Once the project is built, the tool will take care of the compilation/deployment. Because I’m using haxe, I can’t code directly into the pico8 console and test right away. So the tool will do it for you by:

  • compiling your code
  • backing up the pico8 file used by the console
  • copying the code (the one generated by the hxpico8 lib) into your p8 file and keeping all graphics/sounds…
  • copying the file to where the console can read it.

Once that’s done, you just have to reload your game in the Pico8 console, and test it.

For more information, please take a look at the github repository.


See older posts