https://github.com/alessbell/graphql-exercise

https://github.com/alessbell/graphql-exercise

Last synced: 3 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/alessbell/graphql-exercise
• Owner: alessbell
• Created: 2022-04-21T16:51:11.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-04-22T18:08:48.000Z (over 2 years ago)
• Last Synced: 2024-10-11T12:56:26.526Z (27 days ago)
• Language: JavaScript
• Homepage: graphql-exercise.vercel.app
• Size: 123 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# GraphQL Exercise

Keeping your work within a 1 hour range, design and develop a React component that fetches a list of countries from a remote GraphQL API, then displays the retrieved country names in an HTML list.

```js

const API_URL = "http://countries.trevorblades.com";

const ALL_COUNTRIES_QUERY = `

  {

    countries {

      code

      name

    }

  }

`;

function Countries() {

  // ... the ALL_COUNTRIES_QUERY is sent to the GraphQL API_URL to get the list

  // of countries ...

  return (

    


      {/* ... something happens here to show the list of countries ... */}

    

  );

}

```


The Countries component should provide a good user experience by showing appropriate loading states to help keep users informed on data loading progress, and by gracefully/effectively handling network errors.

The approach used to fetch remote data should be designed to be re-usable by other components with different GraphQL queries.

Please feel free to use whichever development tools you prefer; we will review and discuss your implementation via a screen share during the interview call.

If you can send us a copy of your code before the interview (e.g. share a link to GitHub repo, a link to the code in an online code editor, etc.), that would be helpful.