DGS Framework의 GraphiQL을 Apollo GraphQL Sandbox로 대체하기

이번 포스트에서는 DGS Framework의 기본 GraphQL Playground인 Graphiql이 아닌 Apollo Graphql Sandbox에서 사용하는 방법에 대한 내용입니다.

 

환경

• kotlin 1.9.20
• spring-boot 3.3.3
• spring security 6
• graphql-dgs-spring-graphql-starter 9.1.2

DGS Framework로 Graphql 서버를 올리게 되면 기본적으로 host:port/graphiql 로 graphiql playground로 graphql 쿼리 접근이 가능합니다.

Apollo Graphql Sandbox를 사용하려던 이유는 회사내에서는 Apollo Graphql를 Node.js환경에서 운영중이기 때문에 대부분의 개발자는 Apollo Graphql Sandbox를 사용해왔고, 익숙하고, Graphiql보다 input, type 등 query 및 mutation를 사용하는데 좀더 편리하다는 생각을 개인적으로 가졌습니다.

Apollo Graphql Sandbox는 기본적으로 해당 url로 접근해서 introspection endpoint을 입력하면 해당 graphql 서버를 사용할수 있습니다.

https://studio.apollographql.com/sandbox/explorer

 

 

host:port/graphql로 접근할때 아래가 같이 발생했습니다.

 

복붙 아이콘을 클릭해서 shell로 실행해줍니다. 

$ npx diagnose-endpoint@1.1.0 --endpoint="http://localhost:8080/graphql"
Diagnosing http://localhost:8080/graphql
⚠️  OPTIONS response is missing header 'access-control-allow-methods: POST'
⚠️  POST response missing 'access-control-allow-origin' header.
If using cookie-based authentication, the following headers are required from your endpoint:
    access-control-allow-origin: https://studio.apollographql.com
    access-control-allow-credentials: true
Otherwise, a wildcard value would work:
    access-control-allow-origin: *
(📫 Interested in previewing a local tunnel to bypass CORS requirements? Please let us know at https://docs.google.com/forms/d/e/1FAIpQLScUCi3PdMerraiy6GpD-QiC_9KEKVHr4oDL5Vef5fIvzqqQWg/viewform )

 

진단 내용은 CORS 설정이 필요하다고 합니다.

 

CORS를 설정하는 방법을 여러가지 있을수 있는데, 제 프로젝트의 경우에는 Spring Security를 사용해서 CORS 설정을 해두었기 때문에 

origin을 허용해주도록 수정해두었습니다.

 

@Configuration
@EnableWebSecurity
class SecurityConfig(
	...
) {

    @Bean
    fun securityFilterChain(http: HttpSecurity): SecurityFilterChain {
        http
            .csrf { it.disable() }
            .cors { it.configurationSource(corsConfigurationSource()) }
            .sessionManagement { seesionManagement ->
                seesionManagement.sessionCreationPolicy(SessionCreationPolicy.STATELESS)
            }

       ...
    }

    @Bean
    fun corsConfigurationSource(): CorsConfigurationSource {
        val configuration = CorsConfiguration()
        configuration.allowedOriginPatterns = listOf("*")  // 완전히 모든 origin 허용
        configuration.allowedMethods = listOf("GET", "POST", "PUT", "DELETE", "OPTIONS")
        configuration.allowedHeaders = listOf("*")
        configuration.allowCredentials = true
        val source = UrlBasedCorsConfigurationSource()
        source.registerCorsConfiguration("/**", configuration)
        return source
    }
}