Test Assignment: Creating a React Application Using Apollo Client

[Spikus]

Task Description

Create a small React application that interacts with a GraphQL API using Apollo Client. The application should perform the following tasks:

1. Data Fetching: Retrieve a list of posts from the server and display them on the page. https://graphqlzero.almansi.me/
2. Editing Posts: Implement the ability to edit a post by clicking on it. Upon clicking, an input field with the post's text should open, and changes should be automatically saved through a mutation.
3. Handling Page Closure: Ensure changes are saved if the page is closed before the data is sent.

Requirements

1. Use of React: The application should be written in React using functional components and hooks.
2. TypeScript: All code should be written in TypeScript.
3. Apollo Client: Apollo Client should be used for interacting with the GraphQL API.
4. UI/UX: The UI should be simple and clean, with minimal styling.
5. Validation: Add validation for the fields used in post editing.
6. Documentation: Write brief documentation on how to run the application and describe its main components.

Expected Result

• The application should display a list of posts fetched from the server.
• Clicking on a post should open an input field for editing the post's text.
• Changes to the post's text should be automatically saved.
• The application should correctly handle the situation when the page is closed before the data is sent.

How to Submit the Assignment

1. Upload the project to GitHub and provide a link to the repository.
2. Include instructions for running the application in the repository's README file.

Additional Notes

• Follow best practices for TypeScript and React.
• Pay attention to error handling and user experience.

This assignment will help evaluate your ability to work with modern frontend technologies such as React, TypeScript, and Apollo Client, as well as your attention to detail and ability to write clean and maintainable code.