Abstruct

Cookie情報を、BFF(Backend for Frontend)で受け取って、Backend側へ送信するサンプルコードを載せておきます。

Request → (cookie) → BFF → (cookie) → Backend

1. Sample Code

1.1. Request

curl の -b オプションでCookieを送れるので、今回はこちらを利用しました。

1

curl -v --request POST -H 'Content-Type: application/json' -b 'name=taro; age=20' -d '{ "query": [GraphQLの命令] "}' http://localhost:4000/graphql

1

curl -v --request POST -H 'Content-Type: application/json' -b 'name=taro; age=20' -d '{ "query": "query { sample(id: \"001\") {result}}" }' http://localhost:4000/graphql

1.2. BFF

ApolloServer のプラグインの中で、Cookieを受け取って、Backendへ通信するHTTP Client(axios) に Cookie情報をセットします。

1
2
3
4
5
6

  const server = new ApolloServer({
    (略)
    plugins: [
      setCookieToHttpClientPlugin
    ],
  })

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

export const setCookieToHttpClientPlugin: ApolloServerPlugin  = {
  async requestDidStart(_requestContext) {
    return {
      async parsingDidStart(requestContext) {
        axios.interceptors.request.use(
          (config: AxiosRequestConfig<object>): AxiosRequestConfig<object> => {
            const cookie = requestContext.request.http?.headers.get("cookie")
            if(cookie != null && config.headers != null){
              config.headers.cookie =  cookie;
            }
            return config
          }
        )
      },
    }
  }
}

1.3. Backend

  • 使用するライブラリ

    1

    $ yarn add @types/cookie-parser cookie-parser

  • expressへの設定

    1
2
3

    const app = express()
app.use(cookieParser())
app.use(router)

  • Cookieの取得方法

    1
2
3
4

    router.post('/sample', async (req, res, next) => {
  // Cookie が受け取れていることの確認
  console.log(req.cookies)
}

2. Reference