ilxanlar

import { useCallback } from 'react'
import { useMutation } from 'react-query'
import { stringify } from 'qs'

/* We could read this from some config or env */
const API_ROOT = 'https://api.example.com'

/* A helper function to create URL from path and params */
function getUrl(path) {
  return API_ROOT + path

ilxanlar

import { useState } from 'react'
import useMyMutation from './useMyMutation'  // Import custom useMyMutation hook

// Mutation variables
type CreatePostMutationVariables = {
  title: string,
  content: string
}

// Mutation function

ilxanlar

export default function getQueryKey(query, variables) {
  const { name, path, params } = query(variables)
  
  return [name, path, params]
}

ilxanlar

// Import custom useMyQuery hook
import useMyQuery from './useMyQuery'

// Query variables types
type MyPostQueryVariables = {
  id: number
}


// Query function

ilxanlar

import useMyQuery from './useMyQuery'              // Import custom useMyQuery hook
import myPostsQuery from './queries/myPostsQuery'  // Import query function

function MyPosts({ category, status }) {
  const { isLoading, data } = useMyQuery(myPostsQuery, {
    variables: {
      category,
      status
    }
  })

ilxanlar

import { useQuery } from 'react-query'

function MyPosts({ category, status }) {
  const path = `https://api.example.com/posts?category=${category}&status=${status}`
  
  const { isLoading, data } = useQuery(
    ['posts', category, status],
    () => fetch(path).then(res => res.json()
  )
    

ilxanlar

import { useQuery } from 'react-query'
import { stringify } from 'qs'

/* We could read this from some config or env */
const API_ROOT = 'https://api.example.com'

/* A helper function to create URL from path and params */
function getUrl(path, params) {
  let url = API_ROOT + path
  

ilxanlar

/* Writing Flow types for query variables will help a lot
 * to recognize what these variables are
 */
type MyPostsQueryVariables = {
  category?: number,
  status?: 'published' | 'draft'
}

/* This function is the Query
 * that will be passed to our custom useQuery hook

ilxanlar

query {
  categories {
    id
    name
  }

  stores {
    id
    name
  }

ilxanlar

import React from 'react'
import { gql, useMutation, useQuery } from '@apollo/client'

const GET_POSTS = gql`
  query {
    posts {
      id
      title
    }
  }