Trying to Understand Hasura and Nuxt Integration

I am trying to integrate Hasura with Nuxt3. I have been exploring the use of Hasura as a dynamic GraphQL schema manager and Apollo Client in my Nuxt application. I have written a small demo to test the connection to the Hasura service and Apollo Client. In this demo, I am using Hasura as a PostgreSQL database using Docker and connecting to it using the Apollo Client. I have also written a Nuxt module to handle the GraphQL query and mutation. I was wondering if anyone could help me with the following questions. First, how can I secure the GraphQL query and mutation to prevent injection attacks? Second, is it a good practice to write GraphQL queries and mutations in the backend server instead of the frontend? Finally, are there any better ways to integrate Hasura with Nuxt using GraphQL? Any help would be greatly appreciated. I am also attaching my code for reference.