React-query tips and tricks with Github graphQL and REST api

One of the good things about React's opinionated nature is that it's allowed the community to come up with some brilliant solutions and one of them is react-query now going as tanstack-query because they've expanded to the other frameworks

Should you use react-query , I'd say probably . if your ap is depends on making a lot of network requests you should consider it before reaching for something like redux

bear in mind that react query is opinionated about how you fetch your data , its job is handling the response and error/loading states plus cache and retries

Full code linked below , example usage in a project {% embed https://github.com/tigawanna/gitpals %} {% embed https://github.com/tigawanna/gitdeck %}

initialization is simple step 1 : create the actual async query function which returns a response or error

rest api i'll use axios , you can use fetch too

javascript

1const fetchdatas=async()=>{
2const token ="token token token "
3const url="https://api.github.com/user"
4   const res = await axios({
5        method: 'get',
6        url: url,
7        headers: {
8            Authorization: `Bearer ${token}`,
9            "Content-Type": "application/json"
10        },
11    })
12    // //console.log("response == ",res)
13
14    const user = res.data 
15    // //console.log("authed user == ",user)
16    return user
17}

graphql api i'll use graphql-request

javascript

1 const USER = gql`
2         query getMiniUser($name: String!) {
3           user(login: $name) {
4             login
5             id
6             isFollowingViewer
7             viewerIsFollowing
8             bio
9             avatarUrl
10             isViewer
11             url
12           }
13         }
14       `;
15const graphQLClient = new GraphQLClient(endpoint, headers);
16const fetchData = async () => await graphQLClient.request(USER,{name:"tigawanna);

step 2:connect it to a query hook in the case useQuery

javascript

1const key =['user']
2useQuery(key, fetchData,);

here are some tips and tricks i keep reaching for in most of my projects

1 the key the react-quryke is an array, the first item will be a unique string and can also add any variable that the query depends for example if you want the query to re run if the name variable changes

javascript

1const key =['user',name_variable]
2useQuery(key, fetchData);

2 the enabled option : it's very common to want a query to only run after a certain condition is met to avoid unnecessary queries

javascript

1const key =['user']
2useQuery(key, fetchData,
3{
4enabled:name_variable !== "" && name_variable.length > 3
5);

React-query tips and tricks with Github graphQL and REST api

React devs KE 🇰🇪 Meetup February 2025 | Crafting Reusable Code with React & TypeScript: From Design to NPM

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

React-query tips and tricks with Github graphQL and REST api

React devs KE 🇰🇪 Meetup February 2025 | Crafting Reusable Code with React & TypeScript: From Design to NPM

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

More posts

React devs KE 🇰🇪 Meetup February 2025 | Crafting Reusable Code with React & TypeScript: From Design to NPM

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

More posts

React devs KE 🇰🇪 Meetup February 2025 | Crafting Reusable Code with React & TypeScript: From Design to NPM

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer