Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
I'll be sharing my tips and tricks along the way, and I hope that this article will be a valuable resource for anyone looking to learn about GraphQL. Feel free to explore the complete codebase in the GitHub repository.
Today, we will explore the basics of GraphQL and learn how to structure queries and retrieve data from a GraphQL API While no prior experience with GraphQL is required, having some familiarity with React and TypeScript will be helpful in understanding the concepts we'll cover. Whether you're a seasoned developer or a newbie like me, this guide will provide a comprehensive introduction to help you get started with writing GraphQL queries using Apollo Client.
export const apolloClient = new ApolloClient({ uri: "https://rickandmortyapi.com/graphql", cache: new InMemoryCache({ typePolicies: { Query: { fields: { characters: { keyArgs: false, merge(existing: Characters, incoming: Characters) { return { ...incoming, results: [ ...(existing?.results || []), ...(incoming?.results || []), ], } satisfies Characters; }, }, }, }, }, }), });
export const apolloClient = new ApolloClient({ uri: "https://rickandmortyapi.com/graphql", cache: new InMemoryCache({ typePolicies: { Query: { fields: { characters: { keyArgs: false, merge(existing: Characters, incoming: Characters) { return { ...incoming, results: [ ...(existing?.results || []), ...(incoming?.results || []), ], } satisfies Characters; }, }, }, }, }, }), });
Today, we will explore the basics of GraphQL and learn how to structure queries and retrieve data from a GraphQL API While no prior experience with GraphQL is required, having some familiarity with React and TypeScript will be helpful in understanding the concepts we'll cover. Whether you're a seasoned developer or a newbie like me, this guide will provide a comprehensive introduction to help you get started with writing GraphQL queries using Apollo Client.
Today, we will explore the basics of GraphQL and learn how to structure queries and retrieve data from a GraphQL API While no prior experience with GraphQL is required, having some familiarity with React and TypeScript will be helpful in understanding the concepts we'll cover. Whether you're a seasoned developer or a newbie like me, this guide will provide a comprehensive introduction to help you get started with writing GraphQL queries using Apollo Client.
Before everything, you need to create a React project with Typescript. I recommend using the T3 App template, which has excellent documentation and is simple to use. Simply run the following command: npm create t3-app@latest
Note that if you're using Visual Studio Code, I recommend downloading the Apollo GraphQL extension to make your query more readable.