Firebase FunctionsでGraphQLを使う

かなり遠回りをして苦労したので記しておきます。とりあえず動くところまで。

functions書く

firebaseの諸々と、apollo-server-cloud-functionsをyarn addしておきます。したら/functions/index.jsを下記のようにします。

index.js

const functions = require('firebase-functions');
const { ApolloServer, gql } = require('apollo-server-cloud-functions');

const examples = [
  { id: 1, name: 'exam1', message: 'message1' },
  { id: 2, name: 'exam2', message: 'message2' },
  { id: 3, name: 'exam3', message: 'message3' },
]

const samples = [
  { id: 1, title: 'sample1', status: 'ok' },
  { id: 2, title: 'sample2', status: 'ok' },
  { id: 3, title: 'sample3', status: 'bad' },
]

const typeDefs = gql`
  type Query {
    examples: [Example]
    samples: [Sample]
  }

  type Example {
    id: ID!
    name: String!
    message: String!
  }

  type Sample {
    id: ID!
    title: String!
    status: String!
  }
  `;

const resolvers = {
  Query: {
    examples: () => examples,
    samples: () => samples,
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

exports.graphql = functions.https.onRequest(server.createHandler());

完成。あとは煮るなり焼くなり好きにしてください。

動作確認編

$ firebase serveしてローカルで起こすと✔ functions: graphql: <url>というログが吐かれます。そしたらcurlでPOSTしてみましょう。

curl -X POST -H "Content-Type: application/json" --data '{"query": "query { samples {id, title}}"}' <url>

返ってきたら嬉しいもの

{"data":{"samples":[{"id":"1","title":"sample1"},{"id":"2","title":"sample2"},{"id":"3","title":"sample3"},{"id":"4","title":"sample4"}]}}

もし返ってこなかったら何かがアレなのでどうにかしましょう。