Meta tags:
description= Learn to build with GraphQL APIs and understand schemas, queries, mutations, and integrations through comprehensive examples and illustrations;
Headings (most frequently used words):
to, with, graphql, the, query, 2026, ai, testing, and, from, qa, how, in, mutation, for, 101, learn, build, apis, understanding, works, integrations, client, starter, kit, code, example, resources, recent, posts, stay, loop, key, concepts, schema, types, basic, aliases, arguments, variables, fragments, state, of, vibe, coding, adoption, won, now, what, native, stack, text, app, agentic, 12, best, generative, tools, ranked, reviewed, engineers, chatgpt, full, automation, why, built, my, own, tool, tech, secret, weapon, complete, guide, forward, deployed, engineer, role, salary, interviews, is, transforming, manual, tests, fully, autonomous, agents,
Text of the page (most frequently used words):
the (125), query (55), data (43), graphql (38), and (34), error (28), username (27), hashnode (26), type (25), with (25), const (24), from (23), you (23), user (23), json (23), for (20), page (20), name (18), mutation (18), input (18), this (17), api (16), #fragment (16), post (16), that (15), variables (15), then (15), testing (14), publication (14), pagesize (14), response (14), console (14), are (13), apis (12), how (12), posts (11), followers (11), title (11), example (11), schema (11), 2026 (10), request (10), div (10), https (10), com (10), fetch (10), classname (9), import (9), let (9), body (9), application (9), content (9), favourite (9), used (9), tools (8), string (8), queries (8), headers (8), method (8), operation (8), field (8), types (8), new (7), here (7), your (7), nodes (7), return (7), int (7), using (7), stringify (7), log (7), catch (7), gql (7), can (7), postdetails (7), client (7), syed (6), fazle (6), rahman (6), get (6), have (6), follower (6), mutations (6), fields (6), arguments (6), specific (6), acceptinvitetopublication (6), engineer (5), coding (5), use (5), code (5), starter (5), kit (5), props (5), will (5), getuserwithposts (5), different (5), required (5), haimantika (5), structure (5), server (5), checkcustomdomainavailability (5), learn (4), forward (4), deployed (4), into (4), vibe (4), text (4), more (4), head (4), usestate (4), header (4), layout (4), profilepicture (4), when (4), create (4), see (4), same (4), allow (4), multiple (4), below (4), which (4), requests (4), endpoint (4), nov (3), 2025 (3), fixed (3), what (3), tech (3), chatgpt (3), bug0 (3), full (3), why (3), feb (3), five (3), across (3), has (3), state (3), now (3), javascript (3), urql (3), documentation (3), not (3), getserversideprops (3), appprovider (3), loadingmore (3), setloadingmore (3), fetching (3), true (3), load (3), button (3), key (3), components (3), tagline (3), fragments (3), along (3), url (3), slug (3), createdraft (3), make (3), their (3), allows (3), blog (3), define (3), pass (3), flexible (3), instead (3), examples (3), modify (3), they (3), results (3), anotheruser (3), favuser (3), aliases (3), non (3), acceptinvitetopublicationinput (3), available (3), feed (2), subscribe (2), agentic (2), tests (2), fde (2), guide (2), role (2), salary (2), interviews (2), openai (2), better (2), than (2), tool (2), built (2), ranked (2), best (2), generative (2), native (2), generated (2), software (2), developer (2), resources (2), only (2), basics (2), but (2), integrate (2), useeffect (2), usequery (2), publicationbyhostdocument (2), publicationbyhostquery (2), publicationbyhostqueryvariables (2), publicationfragment (2), userfollowersdocument (2), userfragment (2), gql_endpoint (2), process (2), env (2), setpage (2), followerslist (2), setfollowerslist (2), prev (2), loadmore (2), prevpage (2), host (2), export (2), loading (2), rounded (2), font (2), bold (2), flex (2), gap (2), grid (2), false (2), append (2), changes (2), next (2), folder (2), file (2), lib (2), userfollowers (2), creating (2), our (2), operations (2), over (2), build (2), making (2), publication_id (2), draft (2), personal (2), access (2), token (2), all (2), updating (2), include (2), brief (2), publishedat (2), named (2), integer (2), accepts (2), three (2), inputs (2), previous (2), information (2), mitra (2), users (2), one (2), rename (2), allowing (2), includes (2), sends (2), defined (2), basic (2), these (2), indicating (2), whether (2), success (2), root (2), takes (2), indicates (2), nullable (2), understand (2), join (2), read (2), update (2), delete (2), domainavailable (2), checkcustomdomainavailabilityinput (2), building (2), blocks (2), shape (2), queried (2), defines (2), connects (2), each (2), endpoints (2), rest (2), 101 (2), article (2), terms, privacy, about, home, misc, community, docs, blogs, products, updates, changelogs, stay, loop, finally, fdes, automate, 100, critical, speed, transforming, manual, fully, autonomous, agents, palantir, secret, weapon, complete, studio, converts, video, flows, directly, reliable, playwright, scripts, handling, automation, own, compare, applitools, wolf, self, healing, reviewed, engineers, sdlc, cursor, vercel, sentry, stages, stack, app, tldr, developers, daily, trust, dropped, adoption, won, recent, beginners, some, help, made, far, hope, learned, also, next_public_hashnode_gql_endpoint, author, next_public_hashnode_publication_host, notfound, await, async, default, map, disabled, primary, 600, white, onclick, center, alt, src, img, slate, 400, cols, 3xl, width, auto, ishome, function, increment, stop, after, effect, contexts, appcontext, react, following, tsx, pages, start, list, look, follow, kindly, clone, repository, github, solid, foundation, production, theme, need, dashboard, replace, your_personal_access_token, authorization, tags, contentmarkdown, publicationid, createdraftinput, once, got, require, authentication, sure, correct, settings, mentioned, earlier, modification, deleting, action, needs, done, favouritejome, dev, nextjs, already, know, reactjs, shines, details, reuse, parts, pagination, number, per, explanation, dynamic, reusable, hard, coded, like, passed, telling, publications, first, didn, notice, been, two, provide, filter, retrieve, parameters, control, jome, result, would, where, names, times, clarity, achieve, serialized, set, getuserprofile, idea, several, ways, grapql, since, mostly, just, vanilla, before, final, integrations, boolean, was, successful, actual, being, called, argument, variable, declaration, specifies, expects, rather, accept, invitation, while, essential, any, there, implied, isn, exists, meaning, elements, checks, custom, domain, lists, null, union, interface, enumeration, object, scalar, describe, entities, sources, efficient, manipulations, uses, validate, execute, responds, errors, relies, its, handle, representing, etc, pieces, relate, other, concepts, approach, structures, usually, expose, possible, because, specify, needed, single, working, retrieved, returns, means, requirements, embedded, understanding, works, www, youtube, watch, 2lyhuvdmcbi, check, out, webinar, covers, everything, mention, most, widely, ones, industry, cover, demo, someone, who, getting, started, junior, something, come, almost, every, day, job, min, sep, 2024, share, graphql101,
Text of the page (random words):
rking with rest apis data is retrieved from specific endpoints each endpoint has a defined structure for the information it returns this means the data requirements of a client are embedded in the url it connects to graphql takes a different approach instead of multiple endpoints with fixed data structures graphql apis usually expose only a single endpoint this is possible because the data structure is not fixed instead it is flexible and allows the client to specify what data is needed key concepts schema defines the structure of your api the types of data that can be queried and how they relate to each other fields specific pieces of data you request from a type in a query queries the method by which you request specific data mutations used to modify data create update delete types the building blocks of a schema representing the shape and structure of data e g string int user etc schema and types a graphql server connects the client to data sources allowing flexible and efficient data queries and manipulations when a client sends a request the server uses the graphql schema to validate and execute it then responds with the data or errors the server relies on its schema to handle these requests and define available operations types are the building blocks of a graphql schema they describe the shape of the data that can be queried a graphql type defines entities with their fields here are the different available types scalar type object type input types enumeration type union and interface type lists and non null let us understand it with an example query from hashnode api which checks if a custom domain is available or not query checkcustomdomainavailability input checkcustomdomainavailabilityinput checkcustomdomainavailability input input domainavailable in this example schema elements checkcustomdomainavailability is the name of the query operation checkcustomdomainavailability is a field on the root query type in the schema types checkcustomdomainavailabilityinput is an input type the indicates that it s a non nullable type meaning it s required there s an implied return type for the checkcustomdomainavailability field which includes a domainavailable field this return type isn t named in the query but it exists in the schema mutation a mutation in graphql is an operation used to modify data on the server while queries are used to read data mutations are used to create update or delete data mutations are essential for any operation that changes the state of the data on the server let us understand with an example the acceptinvitetopublication mutation in hashnode graphql apis is used to accept an invitation to join a publication mutation acceptinvitetopublication input acceptinvitetopublicationinput acceptinvitetopublication input input success in this example mutation is the operation type indicating that this is a mutation rather than a query acceptinvitetopublication is the name of the mutation operation input acceptinvitetopublicationinput is a variable declaration it specifies that this mutation expects an input of type acceptinvitetopublicationinput and the indicates that this input is required non nullable acceptinvitetopublication input input is the actual mutation being called it s a field on the root mutation type in the schema and it takes the input argument success is a field on the return type of the acceptinvitetopublication mutation a boolean indicating whether the operation was successful graphql integrations with client now that you have an idea of graphql schema types and mutations let s go over several ways to make requests to hashnode grapql api for example the same examples used for hashnode graphql api can be used for all graphql apis since our client application is mostly built with javascript let s see how to make graphql api requests with just vanilla javascript before using urql a graphql client for the final example basic graphql query a basic query allows you to fetch specific fields from the graphql api in the example below we ll get the user favourite and these fields name username profilepicture and tagline from the hashnode graphql api const query query getuserprofile user username favourite id username name profilepicture tagline fetch https gql hashnode com method post headers content type application json body json stringify query then response response json then data console log data catch error console error error error query defined is the graphql query operation as a string fetch this sends a post request to the graphql endpoint url the hashnode graphql api endpoint https api hashnode com headers the content type is set to application json body the request body includes the query serialized into json query with aliases graphql aliases allow you to fetch the same field multiple times with different arguments or rename the results for better clarity let s see how we can achieve this below const query query favuser user username favourite name anotheruser user username haimantika name fetch https gql hashnode com method post headers content type application json body json stringify query then response response json then data console log data catch error console error error error from the query favuser and anotheruser are aliases that rename the results allowing you to query multiple users favourite haimantika in one request the result of the query would be in this structure where you have different names of users with one request data favuser name favourite jome anotheruser name haimantika mitra query with arguments arguments are inputs you provide to fields or queries to filter or modify the data you retrieve they allow you to pass specific parameters to control the query results if you didn t notice we ve been using arguments in the previous examples to get the user information from a specific user favourite in the example below we pass two new arguments to a field posts const query query getuserwithposts user username favourite id name posts page 1 pagesize 5 nodes id title fetch https gql hashnode com method post headers content type application json body json stringify query then response response json then data console log data catch error console error error error here page 1 and pagesize 5 are arguments passed to the user field telling the api to return five posts from the user publications on the first page query with variables queries with variables allow you to pass dynamic inputs into a query making the query flexible and reusable instead of hard coded like the previous examples here s how to query with variables const query query getuserwithposts username string page int pagesize int user username username id name posts page page pagesize pagesize nodes id title const variables username haimantika page 1 pagesize 5 fetch https gql hashnode com method post headers content type application json body json stringify query variables then response response json then data console log data catch error console error error error explanation query name getuserwithposts is the query name that accepts three variables variables the query accepts three variables username string a required string for the username page int a required integer to define the page of posts pagesize int a required integer to define the number of posts per page query the query requests the id and name of the user along with their posts id and title using pagination page and pagesize query with fragments fragments allow you to reuse query fields in different parts of the query or across multiple queries in the example below we have a fragment named postdetails which will be used for the type post const fragment fragment postdetails on post id title brief publishedat const query fragment include the fragment in the query query getuserwithposts username string user username username name posts page 1 pagesize 2 nodes postdetails using the fragment here const variables username favourite fetch https gql hashnode com method post headers content type application json body json stringify query variables then response response json then data console log data catch error console error error error to see how fragment shines in the same query let s get the publication details of a blog using the same fragment postdetails const fragment fragment postdetails on post id title brief publishedat const query fragment include the fragment in the query query getuserwithposts username string user username username name posts page 1 pagesize 2 nodes postdetails use the fragment here publication host blog favouritejome dev id title post slug why learn nextjs if i already know reactjs postdetails use the fragment here const variables username favourite fetch https gql hashnode com method post headers content type application json body json stringify query variables then response response json then data console log data catch error console error error error mutation as mentioned earlier mutation operation allows for the modification of data when creating deleting or updating action needs to be done we use a mutation with hashnode api all mutations require an authentication header to make sure the correct user is updating their data and you can get your personal access token from the developer settings once you ve got your personal access token let s see how we can create a draft post using the createdraft mutation from hashnode api const mutation mutation createdraft input createdraftinput createdraft input input draft id title slug const variables input title my new post slug new post publicationid publication_id contentmarkdown this is the content of the post tags fetch https gql hashnode com method post headers content type application json authorization your_personal_access_token replace with your api key body json stringify query mutation variables then response response json then data console log data catch error console error error error you need to get the publication_id from your dashboard url starter kit code example now that you have a solid foundation of graphql operations that is query and mutations let s go over the hashnode starter kit to build with graphql in production in the example we ll be making use of the hashnode theme to follow along kindly clone the starter kit repository https github com hashnode starter kit we will be using hashnode s graphql apis to list the followers our publication has and this is how it will look let s start by creating a new file in the queries folder lib api queries userfollowers graphql query userfollowers username string page int pagesize int user username username id followers page page pagesize pagesize nodes user and the user fragment lib api fragments user graphql fragment user on user id username profilepicture name tagline in the pages folder create a followers tsx file with the following code import request from graphql request import getserversideprops from next import head from next head import useeffect usestate from react import usequery from urql import appprovider from components contexts appcontext import header from components header import layout from components layout import publicationbyhostdocument publicationbyhostquery publicationbyhostqueryvariables publicationfragment userfollowersdocument userfragment from generated graphql const gql_endpoint process env next_public_hashnode_gql_endpoint type props publication publicationfragment const followers props props const publication props const page setpage usestate 1 const followerslist setfollowerslist usestate userfragment to append followers const loadingmore setloadingmore usestate false const data fetching usequery query userfollowersdocument variables username publication author username page page pagesize 20 effect to append new followers when data changes useeffect if data user followers nodes setfollowerslist prev prev data user followers nodes setloadingmore false stop loading state after fetching data load more function to increment the page const loadmore setloadingmore true setpage prevpage prevpage 1 return appprovider publication publication layout head title followers publication title title head header ishome true div classname feed width mx auto my 10 md w 2 3 h1 classname mb 5 text 3xl font bold followers h1 div classname grid grid cols 2 gap 2 followerslist map follower div key follower id classname flex gap 2 bg slate 400 20 p 3 img src follower profilepicture alt follower name classname h 10 w 10 rounded full div classname flex 1 h2 classname font bold follower name h2 p follower username p div div div load more button div classname mt 5 text center fetching button onclick loadmore classname bg primary 600 rounded full px 4 py 2 text white disabled loadingmore loadingmore loading load more button div div layout appprovider export default followers export const getserversideprops getserversideprops async const data await request publicationbyhostquery publicationbyhostqueryvariables gql_endpoint publicationbyhostdocument host process env next_public_hashnode_publication_host const publication data publication if publication return notfound true return props publication resources if you have made it this far we hope you have not only learned the basics but also how to integrate graphql apis into your code here are some resources to help you learn more graphql documentation hashnode api documentation urql documentation hashnode starter kit apis graphql beginners developer javascript recent posts the state of vibe coding in 2026 adoption won now what vibe coding ai coding tools software testing tldr 92 of us developers use ai coding tools daily 46 of new code is ai generated trust in that code has dropped syed fazle rahman feb 26 2026 the ai native stack 2026 from text to app to agentic qa ai ai tools vibe coding the ai native sdlc in 2026 v0 cursor bug0 vercel and sentry five tools across five stages why testing is the b syed fazle rahman feb 12 2026 12 best generative ai testing tools 2026 ranked and reviewed for qa engineers ai ai qa ai testing tools we ranked the 12 best generative ai testing tools for 2026 compare applitools bug0 and qa wolf for self healing an syed fazle rahman feb 12 2026 from chatgpt for testing to full automation why i built my own ai testing tool chatgpt for testing vibe testing tool ai testing tools better than chatgpt for testing bug0 studio converts video flows directly into reliable playwright scripts handling syed fazle rahman nov 20 2025 tech s secret weapon the complete 2026 guide to the forward deployed engineer role salary and interviews ai forward deployed engineer openai what is a forward deployed engineer get the guide to the fde role salary interviews at openai palantir tech s syed fazle rahman nov 5 2025 how ai is transforming qa testing from manual tests to fully autonomous agents forward deployed engineer fde ai qa testing ai qa testing is finally fixed learn how agentic ai and fdes automate 100 of critical tests speed up ci cd and sl syed faz...
|
