How to use graphql with remix.run

I have an endpoint https://localhost:1337/graphql where i query a lot of things from strapi but i am trying to use remix.run (tsx) as. my framework, there are no latest tutorials as to how to integrate the graphql endpoint to the remix loaders so that i can query directly from the graphql endpoint.

export async function loader() {
  const navdata = await fetchData("/api/navbar?populate=*");
  return {
    navres: navdata
  }
};

i have installed and tried multiple libraries such as @apollo/client @graphql-tools/schema @graphql-tools/utils graphql graphql-requests etc. None of them seem to be working for me either the tutorial is outdated or it has some errors if someone has any knowledge as to how to do this please help me resolve this integration issue.