hunk.code_window:               </div>
               );
             }}
           </Query>
         ```
  
hunk.labels: keep keep replace keep keep keep keep
hunk.after_edit:         }}
  
hunk.file_path: community/sample-apps/nextjs-postgres-graphql/README.md
hunk.type: replace
file: ---
  title: ".graphql file"
  metaTitle: "Fetching queries using apollo.fetch | GraphQL iOS Apollo Tutorial"
  metaDescription: "We will use the Apollo Client in iOS to fetch query using apollo.fetch. We will declare the graphql query inside .graphql files"
  ---
  
  import GithubLink from '../../src/GithubLink.js'
  
  In this section, we will implement GraphQL Queries and integrate with the ios app UI. 
  
  ### Create .graphql files with your queries or mutations
  
  Apollo iOS generates code from queries and mutations contained in `.graphql` files in your target.
  
  A useful convention is to colocate queries, mutations or fragments with the Swift code that uses them by creating `<name>.graphql` next to `<name>.swift`. If you have the Xcode add-ons installed, you can use the Xcode companion view to show a `.swift` file and the corresponding `.graphql` file side by side.
  
  For the sake of brevity, we will keep all our queries and mutations in one file named `api.graphql`
  Create a new file at the roo `Todo/api.graphql` and add the following code:
  
  <GithubLink link="https://github.com/hasura/graphql-engine/blob/master/community/learn/graphql-tutorials/tutorials/ios-apollo/app-final/Todo/api.graphql" text="Todo/api.graphql" />
  
  ```swift
  
  +  query getMyTodos {
  +    todos(where: { is_public: { _eq: false} }, order_by: { created_at: desc }) {
  +      id
  +      title
  +      created_at
  +      is_completed
  +  }
  ```
  
  We have now written the graphql query that will be converted to a class by apollo codegen that you can use inside your view controller files. Try building your target now and check the `API.swift`, there will bunch of code generated for you by apollo.
  
  What does this query do? 
  ------------------------
  The query fetches `todos` with a simple condition; `is_public` must be false. We sort the todos descending by its `created_at` time according to the schema. We specify which fields we need for the todos node.
  
  The query is now ready, let's integrate it with our ios code, open `TodoVC.swift`
  
  ```swift
  var apollo: ApolloClient!
  
  ```
  
  ```swift
   override func viewWillAppear(_ animated: Bool) {
          if( SessionManager.shared.credentials?.idToken! != nil ) {
              apollo = NetworkManager.shared.apolloClient
          }
      }
  ```
  
  `apollo` client's local instance to be used across and we do this, only when the token is not nil.
  
  ```swift
  
   // Filtered Todo list
      func getFilteredTodos(segmentIndex: Int = 0) -> [Todo]{
          switch segmentIndex{
          case 0:
              return self.todos
          case 1:
              return self.todos.filter { $0.isChecked == false }
          case 2:
              return self.todos.filter { $0.isChecked == true }
          default:
              return self.todos
          }
      }
      
      
  -    // Add a New Todo
  -    func addTodos(todo: Todo){
  -    }
  +    // Queries
  +    
  +    // Get Todo from Cloud
  +    private func todoQueryCloud(){
  +        apollo.fetch(query: GetMyTodosQuery()){ (result, error) in
  +            if ((error) != nil) {
  +                if SessionManager.shared.logout() {
  +                    self.performSegue(withIdentifier: "loginVC", sender: self)
  +                }
  +                return
  +            }
  +            guard let data = result?.data else { return }
  +            self.newTodos = data.todos
  +            self.newFitleredTodos = data.todos
  +            DispatchQueue.main.async {
  +                self.setupUI()
  +                self.todoTable.reloadData()
  +            }
  +        }
  +    }
  +    
  -    // Remove Todos
  -    func removeTodos(indexPath: Int){
  -        
  -    }
  ```
  
  We are making a network call using `apollo.fetch` and passing the query class conforming to the `GraphQLQuery` protocol that was generated by apollo codegen for us. This returns a cancellable.
  
  Let's remove the mock `todos` data which was used to populate sample data.
  
  ```swift
  
  override func viewDidLoad() {
          super.viewDidLoad()
          // Do any additional setup after loading the view.
          
          // Add Dummy Data
  -        todos.append(Todo(title: "My Private Todo"))
  -        todos.append(Todo(title: "My Private Todo 1"))
  -        todos.append(Todo(title: "My Private Todo 2"))
  -        todos.append(Todo(title: "My Private Todo 3"))
  -        todos.append(Todo(title: "My Private Todo 4"))
  -        filteredTodos = todos
  -        todoTable.reloadData()
          
          setupUI()
          Utils.shared.setLeftPaddingInput(ofInput: todoInput)
          
          // Dynamic Row Height
          todoTable.estimatedRowHeight = 44.0
          todoTable.rowHeight = UITableView.automaticDimension
      }
  
  ```
  
  Add this function to run in hte `viewWillAppear`
  
  ```swift
  override func viewWillAppear(_ animated: Bool) {
          if( SessionManager.shared.credentials?.idToken! != nil ) {
              apollo = NetworkManager.shared.apolloClient
              
              // Query for the todos
  +            todoQueryCloud()
          }
      }
  ```
  
  Woot! You have written your first GraphQL integration with iOS. Easy isn't it?
  
  How does this work?
  -------------------
  When you execute `apollo.fetch`, Apollo will deliver results in the completion handler with two key parameters:
  
  `error`: A runtime error with graphQLErrors and networkError properties. Contains information about what went wrong with your query.
  
  `data`: An object containing the result of your GraphQL query. This will contain our actual data from the server. In our case, it will be the todo data.
  
  You can read more about reponse format and error handling [here](https://graphql.github.io/graphql-spec/)
  
  Using the `data` object, we are parsing the results from the server. In our query, `data` object has an array `todos` which can be mapped to render each `TodoCell` in our todoTable.
  
  If you noted, there has been some client side filtering to the todos that are displayed.
  