${item.description}
\n Read More\n `);\n return res;\n})\n\n// now this event will pass converted data to your function.\nposts.onComplete(res => {\n const content = document.getElementById('content');\n content?.innerHTML = '';\n res.items.forEach(item => content?.innerHTML += item)\n})\n\nfunction startRequest(category) {\n posts.subscribe(\n ['title', 'latinTitle', 'description'], // the server response will only contains these fields.\n { params: { category } } // you can override headers, params and any argument you passed in fetch function\n // the cid is the id you passed in fetchOne and id is the Id you want to replace.\n )\n}\n\n\nconst cancelButton = document.getElementById('cancel-button');\ncancelButton?.addEventListener('click', posts.abort) // so the user can cancel the fetching request.\n\nconst refreshButton = document.getElementById('refresh-button');\nrefreshButton?.addEventListener('click', () => startRequest('__selected_category_id__'))\n\n\ndocument.addEventListener('load', () => startRequest(''))\n\n```\n\nit is so easy to use. for example if you working on an react project, your component sould be liek this:\n\n```jsx\nimport YouthServers from \"@youth10313/youth-apis\";\nimport i18next from \"i18next\";\nimport { useEffect } from \"react\";\nimport { useState } from \"react\"\nimport { useDispatch, useSelector } from \"react-redux\";\n\nexport const AnsarImamMahdi = () => {\n const dispatch = useDispatch();\n const { ansar } = useSelector(state => state.main);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const api = YouthServers.Data.Feeds.Main.Ansars.fetch(i18next.language);\n api.onChange(setLoading);\n api.onError(setError);\n api.onComplete(data => {\n dispatch({ type: \"FETCH_ANSAR\", payload: data });\n })\n\n useEffect(() => {\n api.subscribe();\n return () => api.abort();\n })\n return