2-1. Flask에서 GraphQL 데이터 GET & POST | React, Flask, GraphQL

■ React + Flask + GraphQL 웹 어플리케이션 프로젝트 전체 로드맵

React & Flask & GraphQL 웹앱 프로젝트 시작 🏁

---

■ GraphQL 

GraphQL이란?

GraphQL은 API(Application Programming Interface)를 위한 쿼리 언어이자 서버측 런타임으로 클라이언트에게 요청한 만큼의 데이터를 제공하는 데 우선 순위를 두는 언어이다. 

 

GraphQL은 특정 타입의 데이터 저장소(data store)를 쿼리하는 언어가 아니다. 대신 다양한 소스들로부터 데이터를 쿼리하기 위해 쓰이는 언이이다. 

■ Postman & GraphQL 

Postman에서 GraphQL 데이터 불러오기

API request 테스트를 용이하게 할 수 있는 포스트맨에서의 예시를 먼저 보고, 그에 맞춰 파이썬으로는 어떻게 코드를 만들 수 있는지 알아보려 한다. 

 

1. 데이터를 요청할 url을 설정하고, method는 POST로 설정

- 모든 GraphQL는 HTTP의 POST로 작동하기 때문에 요청 방식은 꼭 POST로 설정할 것.

2. Header 아래, 인증(authorization) 과 관련한 헤더 설정

- 아래 예시의 경우 환경 설정 변수로 master-token이 설정되어 있고, 그를 header에서 불러오는 것이다.

3. Body 아래, GraphQL 옵션을 선택, Query 아래에는 받고자 하는 데이터를 찾기 위한 쿼리를, Graphical Variables에는 그에 필요한 변수들을 입력해준다. 그리고 Send 버튼을 누르면 아래의 데이터를 response로 받을 수 있다. 

Postman에서 GraphQL 데이터 업데이트하기

1. 이전 단계는 위와 동일하다.

2. Query에는 업데이트 하고자 하는 데이터를 찾기 위한 쿼리를 입력한다. 그리고 GraphQL Variables에는 그에 필요한 변수들을 입력해 주는데, 이때 업데이트하고자 하는 변수의 value 값을 입력하여 준다. 아래 예시에서는 enabled라는 변수의 값을 true로 설정하고자 했다.

■ Flask & GraphQL 

Flask에서 GraphQL 데이터를 불러오거나 업데이트 하는 것은 포스트맨에서 한 것과 거의 동일하다. 쿼리나 헤더, 변수와 같은 목록을 어떻게 함수로 만드느냐가 관건이었던 것 같다. 

 

Flask에서 GraphQL 데이터 불러오기

# graphql api에서 만들어주는 user token을 불러오는 함수

def create_user_token():
	""" Create user token with user ID """
	# 포스트맨에서 query에 해당되는 내용
    query = """
    mutation ($userId: ID!) {
    	authorize(input: {
        	userId: $userId
        }) {
        	accessToken
        }
    }
    """
    
    # 포스트맨에서 graphql variables에 해당되는 내용
    variables = {"userId": user_id}
    
    # 포스트맨에서 header에 해당되는 내용
    headers = {'Authorization': 'Bearer $s' % master_token}
    
    response = requests.post(url=api_url, json={'query': query, 'variables': variables}, headers=headers)
    
    if response.status_code == 200:
    	res_json = response.json()
        return res_json["data"]["authorize"]["accessToken"]
    else:
    	raise Exception(f"Query failed to run with a {response.status_code}.")

Flask에서 GraphQL 데이터 업데이트 하기

# graphql에서 검색되는 solution instance들 중, 원하는 instance의 enabled 값을 true로 변경하기

def set_instance_enable():
	""" Enable Solution Instance """
    
    # 해당 페이지에서 post 한 instance_id 불러와 변수값으로 넣어주기
    temp = request.data.decode("UTF-8")
    data = json.loads(temp)
    instance_id = data["instanceId"]
    instance_name = data["instanceName"]
    
    query = """
    mutation($solutionInstanceId: ID!, $instanceName: String!, $enabled: Boolean!) {
    	updateSolutionInstance(input: {
        	solutionInstanceId: $solutionInstanceId,
            instanceName: $instanceName,
            enabled: $enabled,
        }) {
        	solutionInstance {
            	id
                name
                enabled
                created
            }
        }
    }
    """
    
    variables = {
    	"solutionInstanceId": instance_id,
        "instanceName": instance_name,
        "enabled": True
    }
    
    headers = {"Authorization": "Bearer %s" % create_user_token()}
    response = requests.post(url=url, json={'query': query, 'variables': variables}, headers=headers)

    if response.status_code == 200:
        return response.text
    else:
        raise Exception(f"Query failed to run with a {response.status_code}.")

참고로 위의 쿼리와 변수들은 tray.io 의 api를 불러오는 데 필요한 내용들이다. 

본인이 사용하고자 하는 api와 프로덕트에 따라 쿼리와 변수값이 다 달라질 수 있다. 

Reference

https://www.redhat.com/ko/topics/api/what-is-graphql

https://www.apollographql.com/blog/graphql/basics/what-is-graphql-introduction/

https://www.apollographql.com/blog/tooling/graphql-ide/how-to-use-graphql-with-postman/