[Flutter] Amplify GraphQL 클라우드 기반 앱 만들기 [4]

 

총 2달을 삽질하고 쓰는 정리글.. 좋아요 눌러주시면 감사드리겠습니다

 

---

 

이번 시간에는 간단하면서도 중요한 내용을 짚고 넘어가겠습니다.

 

Amplify가 GraphQL과 통신함에 있어서, 결과로 받아온 json 파일을 Flutter에서 사용하는 방법을 다룰 것입니다.

 

json to Object 라고 보시면 되겠죠??

 

 

우선 일반 list 쿼리를 이용해 데이터값을 받아온 결과를 먼저 봅시다.

  Future<String> GetTodos() async {

    try {
      String graphQLDocument = '''query ListTodos {
  listTodos {
    items {
      name
      description
    }
  }
}''';

      var operation = Amplify.API.query(
          request: GraphQLRequest<String>(
            document: graphQLDocument,
          ));

      var response = await operation.response;
      var data = response.data;
      
      print('Query result : :' + data);


    } on ApiException catch (e) {
      print('Query failed: $e');
    }

    return 'Success';
  }

 

이 함수의 결과는 아래와 같습니다.

 

좀더 가독성있게 보려면, AppSync에서 실행해보면 좀더 편하게 볼 수 있습니다.

{
  "data": {
    "listTodos": {
      "items": [
        {
          "name": "one",
          "description": "no"
        },
        {
          "name": "Sample name",
          "description": "Sample des"
        },
        {
          "name": "every",
          "description": "kko"
        },
        {
          "name": "every",
          "description": "zon"
        },
        {
          "name": "every",
          "description": "goox"
        },
        {
          "name": "every",
          "description": "hello"
        },
        {
          "name": "every",
          "description": "eeo"
        },
        {
          "name": "new Todo",
          "description": null
        },
        {
          "name": "every",
          "description": "hello"
        },
        {
          "name": "Good",
          "description": null
        },
        {
          "name": "my first todo",
          "description": "todo description"
        },
        {
          "name": "goo",
          "description": null
        },
        {
          "name": "goo",
          "description": null
        },
        {
          "name": "every",
          "description": "zon"
        },
        {
          "name": "goo",
          "description": null
        }
      ]
    }
  }
}

 

 

각 item 데이터를 sample 클래스로 정의하고, items 데이터를 List<sample> 로 담아보겠습니다.

 

sample 클래스를 정의하고

class sample {
  String? name;
  String? description;

  sample(this.name, this.description);
}

 

아까 봤던 함수를 조금 수정해줍니다.

  Future<String> GetTodos() async {

    try {
      String graphQLDocument = '''query ListTodos {
  listTodos {
    items {
      name
      description
    }
  }
}''';

      var operation = Amplify.API.query(
          request: GraphQLRequest<String>(
            document: graphQLDocument,
          ));

      var response = await operation.response;
      var data = response.data;


      List<sample> x = (jsonDecode(data)["listTodos"]["items"] as List).map((e) { return sample(e['name'], e['description']); }).toList();

      print(x.length);

    } on ApiException catch (e) {
      print('Query failed: $e');
    }

    return 'Success';
  }

 

print(x.length)에 브레이크를 걸고, x에 어떤 값이 채워져 있는지 확인해보면

성공적으로 데이터들이 채워진 것을 확인할 수 있습니다.