feat: connect frontend to graphql

[johahor]

Replaces Open Library with our own GraphQL API in the frontend. Builds on and replaces #26 (Apollo Client setup).

• Apollo Client now points to our backend.
• New hooks useSearchBooks and useBook fetch books from searchBooks and book(id). toBook converts the backend data to the Book type the components already use.
• The home page uses totalCount for pagination.
• The details page fetches the book and its description directly with book(id), so opening a link to a book works even if it isn't on the current search page.
• Removed the Open Library API code and TanStack Query, since Apollo now handles fetching and caching.

Known issues that we need to decide on:

The already filed issue #33 which is fixing the tests that is currently failing because we no longer use tan-stack.

Filters are no longer being sent to the backend (this needs to be fixed, i suggest in another issue->PR)

Previous/next is only working on the current page, but it would be nice to let it go past the page it loads at first, meaning you can use previous/next to browse without being stopped after 12.

One thing to decide before merge is to accept that pnpm lint and pnpm test is failing because of #33, and if we should fix it in this PR, or get this merged so people can start working on different parts without having to wait on this PR to land.

Closes #25
Closes #27

[martakam]

Great work! I noticed you typed the queries and responses from the GraphQL API manually. It looks like there is GraphQL codegen for the client-side as well - this means we can read the backend schema and generate typescript types automatically. The important part is that we won't need to write the types ourselves at all using this approach! I have implemented this with the latest few commits.
Please let me know if everything works as expected or if you have any questions. Everything else looks good!

[johahor]

Thanks for the update, and good tip!

One quick question before merge - what is schema.graphql in frontend/ used for, or ment to be used for?

I can only see schema.graphql being used one place, and that's in codegen.ts, and that is based of backend/schema.graphql. I can see it was auto generated by this commit 39e146b.

Everything works as expected, so as soon as this question is answered, we can merge.

[martakam]

It was a file left over from a previous configuration I was testing - we do not need it. Pushed a commit to remove it.
There was also two commits I forgot to push. They run Prettier on the code and adjust the config so Prettier does not format generated files.