graphql-zeus icon indicating copy to clipboard operation
graphql-zeus copied to clipboard

Support non-hook Apollo query

Open thisismydesign opened this issue 2 years ago • 1 comments

First off, thanks for addressing support for apollo and https://github.com/graphql-editor/graphql-zeus/issues/194.

useTypedQuery works great but in some cases we can't use hooks (e.g. Next.js SSR getServerSideProps). I'm relying on this in nestjs-starter where I added support for typed client.query as explained here: https://medium.com/geekculture/automagically-typed-graphql-queries-and-results-with-apollo-3731bad989aa

Could you include a similar typedQuery function in the --apollo generator?

thisismydesign avatar Mar 27 '22 20:03 thisismydesign

of course. I am in the process of rewriting zeus a little bit to support new graphql-js-tree library, so it may be a little bit delayed, but definitely worth adding!

aexol avatar Mar 28 '22 08:03 aexol

@aexol Thanks for addressing this. Do you have an example of how to use it? I noticed when I use the latest version, apollo.ts is no longer generated. I run zeus src/schema.gql src/client/app/types --typescript --apollo

Currently I have this:

export const typedQuery = <Z extends ValueTypes[O], O extends 'Query'>(
  query: Z | ValueTypes[O],
  req: Request,
) => {
  return client.query<InputType<GraphQLTypes[O], Z>>({
    query: gql(Zeus('query', query)),
    context: context(req),
  });
};


export async function getServerSideProps({ req }) {
  const { data } = await typedQuery(
    { orders: { alias: true, thing: { name: true } } },
    req,
  );

  return {
    props: { data: data },
  };
}

This still works, but I was hoping I could just import something like typedQuery from the generated files.

thisismydesign avatar Oct 26 '23 13:10 thisismydesign