Apollo Client Queries with React and Apollo Server (useQuery, useLazyQuery)

preview_player
Показать описание


In this video I go over how to use useQuery and useLazyQuery in your React projects when communicating with Apollo Server. We start by initializng a backend apollo server for us to use. We then initalize the Apollo Client in our React project to communicate locally. We then go into the main query logic behind useQuery and useLazyQuery, by showing practical examples using variables and also text input from the user.

apollo client 3
0:00 Intro
1:05 Setup Apollo Server backend
2:40 Setup React project
3:45 Initialize Apollo Client
6:56 Create first query with useQuery (getAllDogs)
12:00 Explaining onCompleted
15:48 Creating query with variables (getDog)
21:12 Set up React useState for text input
22:20 Change useQuery to useLazyQuery
26:17 Outro
  1. Cooper Codes
  2. graphql
  3. graphql tutorial
  4. what is graphql
  5. learn graphql
  6. apollo graphql
Рекомендации по теме
Apollo Client Queries 0:26:43

Apollo Client Queries with React and Apollo Server (useQuery, useLazyQuery)

React Sending GraphQL 0:12:38

React Sending GraphQL Queries To API with Apollo Client

Queries with React 0:06:42

Queries with React & Apollo Client (useQuery, useLazyQuery, caching, fetch policy)

Lazy Queries in 0:11:19

Lazy Queries in GraphQL with React and Apollo Client Hooks

GraphQL With React 0:32:51

GraphQL With React Tutorial - Apollo Client

Setting up Apollo 0:05:13

Setting up Apollo Client Executing Queries with React Apollo

Consuming a GraphQL 0:43:33

Consuming a GraphQL API with Apollo Client and React

Learn GraphQL: Queries 0:14:16

Learn GraphQL: Queries with Apollo client #7

Testing React Apollo 0:16:19

Testing React Apollo Client

How To Unit 0:18:20

How To Unit Test GraphQL Queries With Apollo Client

React Mutations with 0:05:51

React Mutations with Apollo Client & GraphQL API

GraphQL API and 0:15:31

GraphQL API and Apollo Intro - React Tutorial 62

How to query 0:06:57

How to query a GraphQL endpoint with Apollo Client

React With GraphQL 1:06:28

React With GraphQL (Apollo Client) Crash Course

useLazyQuery with Apollo 0:02:39

useLazyQuery with Apollo Client

Build: Reactive variables 0:08:40

Build: Reactive variables with Apollo client

Fragments in GraphQL 0:02:04

Fragments in GraphQL with React Apollo Client

⚛️ Advanced React 2:03:32

⚛️ Advanced React | Apollo Client & React Hooks

HowToGraphQL (React & 0:04:23

HowToGraphQL (React & Apollo) - Introduction (1/10)

Apollo Client Data 0:03:27

Apollo Client Data Normalization

Query Fundamentals - 0:00:59

Query Fundamentals - Apollo Client

Updating GraphQL Global 0:09:46

Updating GraphQL Global Query, Fragment Cache in Apollo Client (React)

Setup a basic 0:28:18

Setup a basic ReactJS, GraphQL and Apollo Client project | ReactJS | GraphQL | Apollo Client

GraphQL Explained in 0:02:22

GraphQL Explained in 100 Seconds

Комментарии
Автор

thank you so much!! it works!!
i was trying to connect GraphQL api to get data. it took about whole day..
as soon as i met your video, i finially made it. only took 20 min.
thank you. and i will looking forward meet your video again.

dryujin
Автор

Thank you! This helps me alot! Please post pagination or search filtering maybe?

mulaicoding
Автор

Hey, a'm using useQuery but every render of component useQuery calling api backend how can i protect it

ABUTAHER-wggz
Автор

왜 이 영상이 나한테 추천됐는지는 모르겠지만 유튜브 알고리즘의 간택을 축하합니다

pocqkiu
Автор

please rename your playlist, this is not apollo client fundamentals. this is just another, one of the countless, generic howto videos which leave you with a to-do list without understanding

lolmeow