Bridge React Query

We have created a bridge between react-query and the generated Bridge SDK, enabling you to use react-query seamlessly with the functions from the SDK and handle errors with full type information.

Install bridge-react-query

terminal
bash
npm i bridge-react-query@latest
# or
pnpm add bridge-react-query
# or 
yarn add bridge-react-query

terminal
bash
npm i bridge-react-query@latest
# or
pnpm add bridge-react-query
# or 
yarn add bridge-react-query

Use Bridge Query

client.ts
ts
import { useBridgeQuery } from 'bridge-react-query';
 
const res = useBridgeQuery(['id'], () => API.user.getMe({ headers: { token: 'secretToken' } }), {
  onSuccess: (data) => {
               
(parameter) data: {
    _id: string;
    username: string;
    email: string;
    age: number;
    language: 'english' | 'french';
    avatar?: string | undefined;
    createdAt: Date;
}
 
  },
  onError: (error) => {
             
(parameter) error: {
    name: 'Wrong permission';
    status: 401;
    data?: any;
} | {
    name: 'User not found';
    status: 404;
} | {
    name: 'Headers schema validation error';
    status: 422;
    data: any;
} | {
    name: 'Axios Error';
    status: 400;
    data: any;
} | {
    name: 'Internal Server Error';
    status: 500;
}
 
  }
})

client.ts
ts
import { useBridgeQuery } from 'bridge-react-query';
 
const res = useBridgeQuery(['id'], () => API.user.getMe({ headers: { token: 'secretToken' } }), {
  onSuccess: (data) => {
               
(parameter) data: {
    _id: string;
    username: string;
    email: string;
    age: number;
    language: 'english' | 'french';
    avatar?: string | undefined;
    createdAt: Date;
}
 
  },
  onError: (error) => {
             
(parameter) error: {
    name: 'Wrong permission';
    status: 401;
    data?: any;
} | {
    name: 'User not found';
    status: 404;
} | {
    name: 'Headers schema validation error';
    status: 422;
    data: any;
} | {
    name: 'Axios Error';
    status: 400;
    data: any;
} | {
    name: 'Internal Server Error';
    status: 500;
}
 
  }
})

Use Bridge Mutation

client.ts
ts
import { useBridgeMutation } from 'bridge-react-query';
 
const res = useBridgeMutation(API.user.getMe, {
  onSuccess: (data) => {
               
(parameter) data: {
    _id: string;
    username: string;
    email: string;
    age: number;
    language: 'english' | 'french';
    avatar?: string | undefined;
    createdAt: Date;
}
 
  },
  onError: (error) => {
             
(parameter) error: {
    name: 'Wrong permission';
    status: 401;
    data?: any;
} | {
    name: 'User not found';
    status: 404;
} | {
    name: 'Headers schema validation error';
    status: 422;
    data: any;
} | {
    name: 'Axios Error';
    status: 400;
    data: any;
} | {
    name: 'Internal Server Error';
    status: 500;
}
 
  }
})

client.ts
ts
import { useBridgeMutation } from 'bridge-react-query';
 
const res = useBridgeMutation(API.user.getMe, {
  onSuccess: (data) => {
               
(parameter) data: {
    _id: string;
    username: string;
    email: string;
    age: number;
    language: 'english' | 'french';
    avatar?: string | undefined;
    createdAt: Date;
}
 
  },
  onError: (error) => {
             
(parameter) error: {
    name: 'Wrong permission';
    status: 401;
    data?: any;
} | {
    name: 'User not found';
    status: 404;
} | {
    name: 'Headers schema validation error';
    status: 422;
    data: any;
} | {
    name: 'Axios Error';
    status: 400;
    data: any;
} | {
    name: 'Internal Server Error';
    status: 500;
}
 
  }
})

If you require additional react-query functionality to be integrated with Bridge, please ask in our Discord Community.