flat-fuchsia•4mo ago

graphql codegen generate query

So im following the guide of refine and how to use graphql codegen but it states to write the queries (the gaphql-tagged version) yourself. What is the point of codegen when you still need to write the whole thing yourself? im specifically refering to Nest.js Query i would love to have the query for the page meta: { gqlQuery: HERE, }, generated

14 Replies

kapa.ai•4mo ago

Hi @Justin. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The purpose of GraphQL Codegen is not to write the queries for you, but to generate TypeScript types based on your GraphQL schema and the queries you've written. This allows you to have strongly typed responses from your GraphQL server, which can help catch errors at compile time and provide better autocompletion in your code editor. In the context of Refine and Nest.js Query, you would write your queries and mutations using graphql-tag, and then use GraphQL Codegen to generate the corresponding TypeScript types. Here's an example of how you might do this:

import gql from "graphql-tag";  

export const POSTS_LIST_QUERY = gql`  
 query PostsList(  
 $paging: OffsetPaging!  
 $filter: BlogPostFilter  
 $sorting: [BlogPostSort!]!  
 ) {  
 blogPosts(paging: $paging, filter: $filter, sorting: $sorting) {  
 nodes {  
 id  
 title  
 category {  
 title  
 }  
 content  
 createdAt  
 }  
 totalCount  
 }  
 }  
`;

import gql from "graphql-tag";  

export const POSTS_LIST_QUERY = gql`  
 query PostsList(  
 $paging: OffsetPaging!  
 $filter: BlogPostFilter  
 $sorting: [BlogPostSort!]!  
 ) {  
 blogPosts(paging: $paging, filter: $filter, sorting: $sorting) {  
 nodes {  
 id  
 title  
 category {  
 title  
 }  
 content  
 createdAt  
 }  
 totalCount  
 }  
 }  
`;

Once you've written your query, you can generate types for it with GraphQL Codegen by running npm run codegen in your terminal. This will generate TypeScript types based on your GraphQL schema and the queries you've written. For the meta object in your data hooks, you would then use the gqlQuery property to pass your query:

useOne({  
 resource: "products",  
 id: 1,  
 meta: {  
 gqlQuery: POSTS_LIST_QUERY,  
 },  
});

useOne({  
 resource: "products",  
 id: 1,  
 meta: {  
 gqlQuery: POSTS_LIST_QUERY,  
 },  
});

This way, you get the benefits of both worlds: you write your queries and mutations in the way that best suits your needs, and you get strongly typed responses from your server thanks to GraphQL Codegen. For more information, you can refer to the Refine documentation on using GraphQL Codegen with Nest.js Query (https://refine.dev/docs/data/packages/nestjs-query#usage-with-graphql-tag) and the GraphQL Codegen documentation (https://the-guild.dev/graphql/codegen/docs/getting-started). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@337253340121399296> kapa.ai is still learning and improving, please let us know how it did by reacting below

flat-fuchsia•4mo ago

@kapa.ai But i dont want to write the queries myself. i want the POSTS_LIST_QUERY to be generated

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I understand your concern. However, as per the information available in the provided sources, GraphQL Codegen does not automatically generate the queries for you. It generates TypeScript types based on your GraphQL schema and the queries you've written. The process of writing queries is a crucial part of working with GraphQL as it allows you to specify exactly what data you need, which can help to reduce the amount of data transferred over the network and improve performance. If you're looking for a way to automatically generate queries, you might need to look into other tools or libraries that offer this functionality. However, this is not a feature provided by GraphQL Codegen or the Refine framework. For more information, you can refer to the Refine documentation on using GraphQL Codegen with Nest.js Query (https://refine.dev/docs/data/packages/nestjs-query#usage-with-graphql-tag) and the GraphQL Codegen documentation (https://the-guild.dev/graphql/codegen/docs/getting-started). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@337253340121399296> kapa.ai is still learning and improving, please let us know how it did by reacting below

flat-fuchsia•4mo ago

@kapa.ai i have my schema.types.ts can i somehow directly access that and tell refine to use that instead of query?

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can use the types generated by GraphQL Codegen in your Refine application. However, these types are meant to provide TypeScript typings for the responses of your GraphQL queries and mutations, not to replace the queries themselves. In Refine, you can use these types to strongly type the data you receive from your GraphQL server. For example, if you have a type for a post in your schema.types.ts file, you can use it like this:

import { useQuery } from "@refine/core";
import { Post } from "./schema.types.ts";

const { data } = useQuery<Post>({ 
    resource: "posts",
    meta: {
        gqlQuery: POSTS_LIST_QUERY,
    },
});

import { useQuery } from "@refine/core";
import { Post } from "./schema.types.ts";

const { data } = useQuery<Post>({ 
    resource: "posts",
    meta: {
        gqlQuery: POSTS_LIST_QUERY,
    },
});

In this example, Post is a type generated by GraphQL Codegen, and POSTS_LIST_QUERY is a GraphQL query you've written. The useQuery hook will return data that is strongly typed as Post. However, you still need to write the GraphQL queries yourself. The types generated by GraphQL Codegen are based on your GraphQL schema and the queries you've written, and they are meant to provide TypeScript typings for the responses of these queries, not to replace the queries themselves. For more information, you can refer to the Refine documentation on using GraphQL Codegen with Nest.js Query (https://refine.dev/docs/data/packages/nestjs-query#usage-with-graphql-tag) and the GraphQL Codegen documentation (https://the-guild.dev/graphql/codegen/docs/getting-started). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@337253340121399296> kapa.ai is still learning and improving, please let us know how it did by reacting below

flat-fuchsia•4mo ago

@kapa.ai but POSTS_LIST_QUERY deosnt exist

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I understand your concern. The POSTS_LIST_QUERY is an example of a GraphQL query that you would need to write yourself. This query is not automatically generated. In the context of Refine, you would typically write your GraphQL queries using the graphql-tag library, and then use these queries in your data hooks with the gqlQuery property in the meta object. Here's an example of how you might write a query:

import gql from "graphql-tag";

export const POSTS_LIST_QUERY = gql`
  query PostsList($paging: OffsetPaging!, $filter: BlogPostFilter, $sorting: [BlogPostSort!]!) {
    blogPosts(paging: $paging, filter: $filter, sorting: $sorting) {
      nodes {
        id
        title
        category {
          title
        }
        content
        createdAt
      }
      totalCount
    }
  }
`;

import gql from "graphql-tag";

export const POSTS_LIST_QUERY = gql`
  query PostsList($paging: OffsetPaging!, $filter: BlogPostFilter, $sorting: [BlogPostSort!]!) {
    blogPosts(paging: $paging, filter: $filter, sorting: $sorting) {
      nodes {
        id
        title
        category {
          title
        }
        content
        createdAt
      }
      totalCount
    }
  }
`;

And here's how you would use this query in a data hook:

useOne({
  resource: "products",
  id: 1,
  meta: {
    gqlQuery: POSTS_LIST_QUERY,
  },
});

useOne({
  resource: "products",
  id: 1,
  meta: {
    gqlQuery: POSTS_LIST_QUERY,
  },
});

If you're looking for a way to automatically generate GraphQL queries based on your schema, you might need to look into other tools or libraries that offer this functionality. However, this is not a feature provided by GraphQL Codegen or the Refine framework. For more information, you can refer to the Refine documentation on using GraphQL Codegen with Nest.js Query (https://refine.dev/docs/data/packages/nestjs-query#usage-with-graphql-tag) and the GraphQL Codegen documentation (https://the-guild.dev/graphql/codegen/docs/getting-started). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@337253340121399296> kapa.ai is still learning and improving, please let us know how it did by reacting below

flat-fuchsia•4mo ago

😦

vicious-gold•4mo ago

Codegen generates typescript definitions based on your queries. Also, you will have intellisense autocomplete while writing your GraphQL queries. For examle if you start users query, User fields will be suggested to you in your editor.

flat-fuchsia•4mo ago

Yeah i have gave up generating those. even tho its just copy pasting 99% The only thing different between all the queries are the fields havent found any lib that generates document nodes prgoramatically by just giving a type and the fields to query/mutate