今天要來整理上一篇文章中所寫的 graphql.ts 檔案，以便後續串接資料庫。
在 GraphQL 的執行環境中，通常有兩個基本概念是 Schema 和 Resolver 的部份。

Schema的部份，就是以下這段程式：

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

Resolver 的部份，就是以下這段程式：

const resolvers = { Query: { hello: () => `Hello World!` } };

我們要來將這兩段程式，分別移到不同的檔案。
所以在 graphql.ts 檔案中，可以先將以上兩段程式註解起來或移除。

Schema

在專案資料夾中(webmix_api)，建立 typedefs.ts 檔案，然後內容如下：

import { gql } from "https://deno.land/x/graphql_tag@0.0.1/mod.ts";

export const typeDefs = gql`
  type Query {
    hello: String
  }
`;

在 graphql.ts 檔案中，移除底下這行，因為在 graphql.ts 檔案中用不到：

import { gql } from "https://deno.land/x/graphql_tag@0.0.1/mod.ts";

Resolver

在專案資料夾中(webmix_api)，建立 resolvers.ts 檔案，然後內容如下，之後會在此檔中，串接資料庫：

export const resolvers = {
  Query: {
    hello: () => `Hello World!`
  }
};

匯入 Schema 和 Resolver

在 graphql.ts 檔案中，匯入 typedefs.ts 和 resolvers.ts 檔案，即加上以下兩行程式：

import { typeDefs } from "./typedefs.ts";
import { resolvers } from "./resolvers.ts";

這樣就完成了。

這邊提供完整的 graphql.ts 檔案，內容如下：

import { serve } from "https://deno.land/std@0.154.0/http/server.ts";
import { GraphQLHTTP } from "https://deno.land/x/gql@1.1.2/mod.ts";
import { makeExecutableSchema } from "https://deno.land/x/graphql_tools@0.0.2/mod.ts";

import { typeDefs } from "./typedefs.ts";    // Schema
import { resolvers } from "./resolvers.ts";  // Resolver

const port = 8080; // 指定 port

const handler = async (req) => {
  const { pathname } = new URL(req.url);

  // 指定路徑
  return pathname === '/graphql'
    ? await GraphQLHTTP<Request>({
        schema: makeExecutableSchema({ resolvers, typeDefs }),
        graphiql: true
      })(req)
    : new Response('Not Found', { status: 404 });
};

//啟動 GraphQL 伺服器
console.log(`GraphQL HTTP webserver running. Access it at: http://localhost:${port}/graphql`);
await serve(handler, { port });

可以再到 GraphQL 的測試環境( http://localhost:8080/graphql )中測試看看，都還是可以正常運行的。

結語

雖然只是簡單的一點程式調整，不過也是看了些許資料。另外若想學習 GraphQL 的相關知識，也可以至 GraphQL 的官方網站閱讀些資料。