GolangとSveltekitでWebアプリケーションを作る

go get github.com/99designs/gqlgen
go run github.com/99designs/gqlgen init
# server.goやgraphディレクトリが自動生成される
go mod tidy
go run ./server.go

# GraphQL schema example
#
# https://gqlgen.com/getting-started/

type Todo {
    id: ID!
    text: String!
    done: Boolean!
    user: User!
}

type User {
    id: ID!
    name: String!
    email: String
}

type Query {
    users: [User!]!
    todos: [Todo!]!
}

input NewTodo {
    text: String!
    userId: String!
}

type Mutation {
    createTodo(input: NewTodo!): Todo!
    createUser(name: String!, email: String): User!
}

func (r *queryResolver) Users(ctx context.Context) ([]*model.User, error) {
	return []*model.User{
		{
			ID:   "1",
			Name: "user1",
		},
		{
			ID:   "2",
			Name: "user2",
		},
	}, nil
}

package infra

import (
	"fmt"
	"log"
	"os"

	"github.com/jmoiron/sqlx"
	_ "github.com/lib/pq"
)

var schema = `
CREATE TABLE IF NOT EXISTS myuser (
		id serial PRIMARY KEY,
		name text NOT NULL,
		email text
);

CREATE TABLE IF NOT EXISTS todo (
		id serial PRIMARY KEY,
		text text NOT NULL,
		done boolean NOT NULL,
		user_id integer REFERENCES myuser(id)
)`

var DbInstance *sqlx.DB

func Db() *sqlx.DB {
	if DbInstance != nil {
		return DbInstance
	}

	dsn := fmt.Sprintf(
		"host=%s user=%s password=%s dbname=%s port=%s sslmode=disable TimeZone=Asia/Tokyo",
		os.Getenv("POSTGRES_HOST"),
		os.Getenv("POSTGRES_USER"),
		os.Getenv("POSTGRES_PASSWORD"),
		os.Getenv("POSTGRES_DB"),
		os.Getenv("POSTGRES_PORT"),
	)
	DbInstance, err := sqlx.Connect("postgres", dsn)

	DbInstance.MustExec(schema)

	if err != nil {
		log.Fatal("failed to init database: ", err)
	}

	return DbInstance
}

package service

import (
	"gin/graph/model"
	"gin/infra"
)

func GetUsers() ([]*model.User, error) {
	db := infra.Db()
	rows, _ := db.Queryx("SELECT * FROM myuser")

	var users []*model.User
	// db-user to model-user
	for rows.Next() {
		var user model.User
		rows.StructScan(&user)
		users = append(users, &user)
	}

	return users, nil
}

func CreateUser(name string, email *string) (*model.User, error) {
	db := infra.Db()
	tx := db.MustBegin()
	tx.MustExec("INSERT INTO myuser (name, email) VALUES ($1, $2)", name, email)
	tx.Commit()

	return &model.User{
		Name:  name,
		Email: email,
	}, nil
}

import (
	"context"
	"fmt"
	"gin/graph/model"
	"gin/service"
)

// 中略

// CreateUser is the resolver for the createUser field.
func (r *mutationResolver) CreateUser(ctx context.Context, name string, email *string) (*model.User, error) {
	user, err := service.CreateUser(name, email)
	return user, err
}

// Users is the resolver for the users field.
func (r *queryResolver) Users(ctx context.Context) ([]*model.User, error) {
	users, err := service.GetUsers()
	return users, err
}

package model

type Todo struct {
	ID   int    `json:"id" db:"id"`
	Text string `json:"text" db:"text"`
	Done bool   `json:"done" db:"done"`
}

package service

import (
	"gin/model"

	"github.com/jmoiron/sqlx"
)

type TodoService struct {
	db sqlx.DB
}

func NewTodoService(db sqlx.DB) *TodoService {
	return &TodoService{db: db}
}

func (s TodoService) GetTodoList() []model.Todo {
	todoList := []model.Todo{}

	rows, err := s.db.Queryx("SELECT * FROM todo")
	if err != nil {
		panic(err)
	}

	for rows.Next() {
		todo := model.Todo{}
		err := rows.StructScan(&todo)
		if err != nil {
			panic(err)
		}
		todoList = append(todoList, todo)
	}

	return todoList
}

func (s TodoService) CreateTodo(text string, done bool) model.Todo {
	row, err := s.db.NamedQuery(`INSERT INTO todo (text,done) VALUES (:text,:done) RETURNING id, text, done`,
		map[string]interface{}{
			"text": text,
			"done": done,
		})

	if err != nil {
		panic(err)
	}

	newTodo := model.Todo{}
	row.Next()
	err = row.StructScan(&newTodo)
	if err != nil {
		panic(err)
	}

	return newTodo
}

func (s TodoService) UpdateTodoByID(id int, text string, done bool) model.Todo {
	row, err := s.db.NamedQuery(`UPDATE todo SET text = :text, done = :done WHERE id = :id RETURNING id, text, done`,
		map[string]interface{}{
			"id":   id,
			"text": text,
			"done": done,
		})

	if err != nil {
		panic(err)
	}

	todo := model.Todo{}
	row.Next()
	err = row.StructScan(&todo)
	if err != nil {
		panic(err)
	}

	return todo
}

func (s TodoService) DeleteTodoByID(id int) bool {
	_, err := s.db.NamedQuery(`DELETE FROM todo WHERE id = :id`,
		map[string]interface{}{
			"id": id,
		})

	if err != nil {
		panic(err)
	}

	return true
}

import { createSchema, createYoga } from 'graphql-yoga';
import type { RequestEvent, RequestHandler } from '@sveltejs/kit';

const yogaApp = createYoga<RequestEvent>({
	schema: createSchema({
		typeDefs: `
			type Query {
				todoList: [Todo!]!
			}
			type Mutation {
				postTodo (text: String!): Todo!
				updateTodo (id: ID!, text: String!, done: Boolean!): Todo!
				deleteTodo (id: ID!): Boolean!
			}
			type Todo {
				id: ID!
				text: String!
				done: Boolean!
			}
		`,
		resolvers: {
			Query: {
				todoList: async () => {
					const res = await fetch('http://app:3000/api/todo/');
					const val = await res.json();
					return val;
				}
			},
			Mutation: {
				postTodo: async (parent: unknown, args: { text: string }) => {
					const res = await fetch('http://app:3000/api/todo/', {
						method: 'POST',
						headers: {
							'Content-Type': 'application/json'
						},
						body: JSON.stringify({ text: args.text, done: false })
					});
					const val = await res.json();
					return val;
				},
				updateTodo: async (parent: unknown, args: { id: string; text: string; done: boolean }) => {
					const res = await fetch(`http://app:3000/api/todo/${args.id}`, {
						method: 'PUT',
						headers: {
							'Content-Type': 'application/json'
						},
						body: JSON.stringify({ text: args.text, done: args.done })
					});
					const val = await res.json();
					return val;
				},
				deleteTodo: async (parent: unknown, args: { id: string }) => {
					const res = await fetch(`http://app:3000/api/todo/${args.id}`, {
						method: 'DELETE'
					});
					const val = (await res.json()) as boolean;
					return val;
				}
			}
		}
	}),
	// Needed to be defined explicitly because our endpoint lives at a different path other than `/graphql`
	graphqlEndpoint: '/api/graphql',

	// Needed to let Yoga use sveltekit's Response object
	fetchAPI: { Response }
}) satisfies RequestHandler;

export { yogaApp as GET, yogaApp as POST };

import type { PageServerLoad } from './$types';
import { Client, fetchExchange, gql } from '@urql/core';

const client = new Client({
	url: 'http://front:5173/api/graphql',
	exchanges: [fetchExchange]
});

export const load: PageServerLoad = async ({ depends, setHeaders }) => {
	const result = await client
		.query(
			gql`
				query {
					todoList {
						id
						text
						done
					}
				}
			`,
			{}
		)
		.toPromise();

	depends('app:todolist');
	return { todoList: result.data.todoList };
};

<script lang="ts">
	import { invalidate, invalidateAll } from '$app/navigation';
	import { Client, cacheExchange, fetchExchange, gql, mutationStore } from '@urql/svelte';

	const client = new Client({
		url: 'http://localhost:5173/api/graphql',
		exchanges: [cacheExchange, fetchExchange]
	});

	type Todo = {
		id: string;
		text: string;
		done: boolean;
	};

	let newTodo: Omit<Todo, 'id'> = {
		text: '',
		done: false
	};

	export let data: { todoList: Todo[] };

	const updateTodo = (id: string, text: string, done: boolean) => {
		mutationStore({
			client,
			query: gql`
        mutation {
          updateTodo (id: "${id}", text: "${text}", done: ${done ? 'true' : 'false'}) {
            id
            text
            done
          }
        }
      `
		});
		invalidate('app:todolist');
	};

	const deleteTodo = async (id: string) => {
		mutationStore({
			client,
			query: gql`
        mutation {
          deleteTodo (id: "${id}")
        }
      `
		});
		invalidate('app:todolist');
	};

	const createTodo = async (newTodo: Omit<Todo, 'id'>) => {
		mutationStore({
			client,
			query: gql`
        mutation {
          postTodo (text: "${newTodo.text}") {
            id
            text
            done
          }
        }
      `
		});
		invalidate('app:todolist');
		newTodo.text = '';
	};
</script>

<ul>
	<!-- show todolist-->
	{#each data.todoList as todo}
		<li>
			<span>{todo.id}</span>
			<input
				type="text"
				class={`${todo.done ? 'line-through' : ''}`}
				value={todo.text}
				on:change={(val) => updateTodo(todo.id, val.target.value, todo.done)}
			/>
			<input
				type="checkbox"
				name={todo.id}
				bind:checked={todo.done}
				on:change={(val) => {
					updateTodo(todo.id, todo.text, val.target.checked);
				}}
			/>
			<button on:click={() => deleteTodo(todo.id)}> delete </button>
		</li>
	{/each}
	<li>
		<span>new</span>
		<input type="text" bind:value={newTodo.text} />
		<button on:click={() => createTodo(newTodo)}>create</button>
	</li>
</ul>