What is the best way to utilize the code generated by @graphql-codegen for fetching a single record?

After following the steps in the getting started guide, I now have a code file that was generated from an existing federated graph that has been deployed. The generated code includes:

export type Query = {
  __typename?: 'Query';
  customerById: Customer;
  // not a complete list

Now, I want to use this query to get a specific customer with ID 

5a5e5aca-5512-4fb7-bde4-03fadf88e777
. The documentation indicates writing new GQL code, for example:

const allFilmsWithVariablesQueryDocument = graphql(/* GraphQL */ 
 query allFilmsWithVariablesQuery($first: Int!) {
    allFilms(first: $first) {
      edges {
        node {
          ...FilmItem

... 

const { data } = useQuery(allFilmsWithVariablesQueryDocument, { variables: { first: 10 } })

This approach seems to suggest using local GQL to query remote GQL?

Instead, I would prefer a simpler method like 

const customer = runQuery(Queries.customerById, {id: '5a5e5aca-5512-4fb7-bde4-03fadf88e777' })
. This is similar to how Zeus functions (refer to "Query with Zeus Chain Client" section on Zeus website).

I am looking for autocomplete functionality in queries. While Zeus offers this feature to some extent, it has certain dependencies like global fetch and Websocket which are not ideal as they require corrections in the generated code. Is this capability available in @graphql-codegen? Am I misunderstanding something here? If it's possible to utilize Query.customerById within a function, how can this be achieved?

typescriptgraphqlcode-generationgraphql-codegen

Answer №1

Greetings Charly, I am currently focused on developing GraphQL Code Generator.

It appears that the typescript-generic-sdk plugin could be suitable for your requirements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 5's data display glitch

Whenever I scroll down a page with a large amount of data, there is a delay in rendering the data into HTML which results in a white screen for a few seconds. Is there a solution to fix this issue? Link to issue I am experiencing HTML binding code snippe ...

typescriptangular5

Developing an npm module encapsulating API contracts for seamless integration with front-end applications using Typescript

I am curious if Typescript supports this specific idea, and I could use some advice on how to make it work. In my project, there's a frontend application and a backend REST API with clear contract classes for Inputs and Outputs. These classes outline ...

reactjstypescriptnestjs

Issue with Jest mock function failing to trigger axios instance function causing it to return undefined

I initially found a solution on this StackOverflow thread However, I wanted to add my own helper function that generates a fresh Axios instance with the user's authentication token. Here is what I came up with: import axios from "axios"; c ...

javascripttypescriptunit-testingaxiosjestjs

The essential guide to creating a top-notch design system with Material UI

Our company is currently focusing on developing our design system as a package that can be easily installed in multiple projects. While the process of building the package is successful, we are facing an issue once it is installed and something is imported ...

javascripttypescriptmaterial-uies6-modulesparcel

Troubleshooting TypeScript: Issues with Object.assign and inheritance

After successfully using the code within an Angular project, I decided to switch to React only to find that the code is now producing unexpected results. class A { constructor(...parts: Partial<A>[]) { Object.assign(this, ...parts); } } cla ...

reactjstypescript

Building a TypeScript function using a dictionary with function names and argument types

In possession of a dictionary { "function_name":"myFunc", "arguments":["a1","a2"] } A desire to create a function where the name matches that in the dictionary above (i.e myFunc ) with respective arg ...

javascriptangulartypescriptfunction

Refresh the mapbox source features in real-time

Currently, I am mapping out orders on a map with layers and symbols that have different statuses. When the status of an order changes, I want to update the color of the symbol accordingly. The layer configuration looks like this: map.addLayer({ id: &q ...

javascriptreactjstypescriptmapboxmapbox-gl-js

Angular and RxJS work together to repeat actions even when an HTTP request is only partially successful

I am currently attempting to achieve the following: Initiate a stop request using a stored ID in the URL. Send a request with a new ID in the URL and save this new ID. If the response code is 200, proceed as normal. If it is 204, repeat steps 1 and 2 with ...

javascriptangulartypescriptrxjs

Managing events like onClick for custom components in Next.js and React: A Beginner's Guide

Utilizing tailwindCSS for styling and writing code in Typescript with Next.JS. A reusable "Button" component has been created to be used across the platform. When the button is pressed, I aim to update its UI in a specific way. For instance, if there&apos ...

reactjstypescriptnext.jsevent-handlingtailwind-css

Issues arise in TypeScript when attempting to assign custom properties to a Vue component

I was working on implementing Vue middleware and faced an issue while trying to add a custom property to one of my components in Vue. Here's the code snippet: middleware.js: import { VueConstructor } from 'vue/types'; function eventPlugin(v ...

javascripttypescriptvue.jsvuejs2

My goal is to create a carousel using Vue 3 with the Composition API and TypeScript

Creating a carousel with Vue 3 and TypeScript has been quite challenging for me. I heard about using "vue-awesome-swiper" to build a carousel, but I couldn't find a tutorial on how to use it. Does anyone know how to utilize this tool effectively? Alte ...

typescriptvue.js

Enhance the functionality of Immutable.js field by integrating a custom interface in Typescript

Imagine a scenario where the property name is field, essentially an immutable object. This means that methods like field.get('') and other immutable operations are available for use. Nevertheless, I have my own interface for this field which may ...

reactjstypescriptimmutable.js

Is there a way to assign DTO to an entity within typescript?

For my current project, I am utilizing Vue with TypeScript and Axios to retrieve objects from the backend. Here is an example of the object type I am working with: class Annoucement { id!: string; description?: string; deal?: Deal; realty?: ...

typescriptmappingdto

An object may be null when its type is A or undefined, but we are certain it is not undefined

Since the release of version 4.8.4, the TypeScript compiler has been flagging an issue with the following code: type A = {v: number} function get_the_first<T>(xs: T[]): T | undefined { if (xs.length > 1) return xs[0]; else ...

typescript

What sets apart an index signature from a Record when dealing with an empty object?

I'm struggling to differentiate between index signatures and record types. Can someone clarify the distinctions and suggest when each should be used? In particular, I want to specify the type of an object with random strings for keys and values that ...

typescriptmapped-typesindex-signature

Branching tests within a method in Angular

Recently, I've implemented a method in my TypeScript file that contains 3 different branches. Now, as I'm working with Angular and Jasmine, I find myself wondering - how can I effectively test all of these branches? getAges(ages: Ages) { if ...

angulartypescriptunit-testingjasmine

Passing NextJS props as undefined can lead to unexpected behavior and

Struggling with dynamically passing props to output different photo galleries on various pages. One of the three props works fine, while the others are undefined and trigger a warning about an array with more than one element being passed to a title elemen ...

javascriptreactjstypescriptnext.js

Can someone guide me on integrating google.visualization typings with Angular CLI?

Currently, I am facing an issue while attempting to utilize Google Charts in a project built with Angular CLI (version 7.2.3). At first, I attempted to install the typings using the command below (both with and without the -dev flag): npm install --sav ...

angulartypescriptangular-clitypescript-typings

Strange failure during the build process

Encountering a strange error while attempting to compile an angular 4 app. Here's the issue below: Class extends value undefined is not a constructor or null TypeError: Class extends value undefined is not a constructor or null at Object.<ano ...

angulartypescript

Encountering a fresh issue after updating to TS version 4.4.3 while accessing properties of the top "Object may be 'null'."

After upgrading my project to TypeScript 4.4.3 from 3.9.9, I encountered a change in the type declarations for the top property. My project utilizes "strictNullChecks": true, in its configuration file tsconfig.json, and is browser-based rather t ...

javascripttypescript