Related
Why the subscriptionData inside the updateQuery parameter is receiving the query data and not the data from the subscription ?
The query:
const {
data,
error: homePageError,
loading: homePageLoading,
refetch: refetchRaw,
subscribeToMore,
} = useHomePageQuery({
fetchPolicy: "cache-and-network",
notifyOnNetworkStatusChange: true,
skip: !currentAccountId || screen !== "HOME",
variables: {
accountId: currentAccountId ?? "none",
},
});
the subscription:
useEffect(() => {
subscribeToMore({
document: gql`
subscription HomePageRemoteChargeCreated($userId: ID!) {
remoteChargeCreated(userId: $userId) {
remoteCharge {
id
station {
id
name
}
}
}
}
`,
updateQuery: (prev, { subscriptionData }) => {
if (!subscriptionData.data) return prev;
const createdRemoteCharge = subscriptionData.data.remoteChargeCreated;
return {
me: {
...prev.me,
account: {
...prev.me?.account,
accountUser: {
...prev.me?.account?.accountUser,
currentRemoteCharge: {
id: createdRemoteCharge?.id,
station: { ...createdRemoteCharge.station },
},
},
},
},
};
},
variables: {
userId: currentUserId,
},
});
}, [client, currentAccountId, currentUserId, subscribeToMore]);
What I get in subscriptionData type (I should received the content declared inside of the subscription):
(parameter) subscriptionData: {
data: HomePageQuery;
}
I'm using "#apollo/client": "3.7.1" and "react": "18.2.0",
Is anyone having a clue on this ?
this is my api middleware caller that i have created:
/* eslint-disable #typescript-eslint/no-var-requires */
// /* eslint-disable no-import-assign */
import Axios from 'axios';
import * as queryString from 'query-string';
const caseConverter = require('change-object-case');
import { cleanParams } from '_utilities/common';
import { REQUEST_TYPES } from './constants';
import { useLoginUser } from '_store/user';
interface IAuth {
method?: string;
url?: string;
data?: any;
params?:any,
contentType?:string,
isTransformRequestRequired?:boolean
}
export function apiCaller(
{
method = REQUEST_TYPES.GET,
url = '',
params = {},
data = {},
contentType = 'application/json',
isTransformRequestRequired = true,
}:IAuth,
) {
const user = useLoginUser.getState().user;
const token = user?.data?.token || '';
// caseConverter.options = {recursive: true, arrayRecursive: true};
return Axios({
method,
url,
params,
paramsSerializer: queryParams => queryString.stringify(caseConverter.snakeKeys(cleanParams(queryParams))),
data,
transformRequest: [reqData => isTransformRequestRequired
? JSON.stringify(caseConverter.toSnake(reqData))
: reqData],
transformResponse: [(respData) =>
{
if(typeof respData === 'string')
return JSON.parse(respData)
else {
return respData
}
}],
headers: {
Authorization: user !== null ? `Token ${ token }` : '',
'Content-Type': contentType,
},
responseType: 'json',
validateStatus: status => status >= 200 && status < 300,
})
.then(({ data: resp }) => resp)
.catch(error => {
console.log(error,'error')
// if user session is expired from server and got 401, will logout the user from application
if(error.response.status === 401) {
// store.dispatch(logoutSuccess());
} else {
throw(error);
}
});
}
this is where I am calling my apiCaller:
import { apiCaller } from '../api-caller';
import { ENDPOINTS, REQUEST_TYPES } from '../constants';
import moment from 'moment';
export const usersApi = async (params:any) => {
const res = await apiCaller(
{
method: REQUEST_TYPES.GET,
url: `${ENDPOINTS.USERS}/`,
params:{
...params,
startDatetime: params.startDatetime ? moment(params.startDatetime).utc().format('YYYY-MM-DD H:mm:ss') : '',
endDatetime: params.endDatetime ? moment(params.endDatetime).utc().format('YYYY-MM-DD H:mm:ss') : '',
},
},
);
return res;
}
this is where I am using useQuery to fetch data from backend:
import { useQuery } from '#tanstack/react-query'
import { usersApi } from '_api/users'
import { useAdminUser } from 'pages/Admin/AdminUsers/_store'
const filters = useAdminUser.getState().filters
export const useCreateProfile = () => {
const query = ['cashierShifts']
return useQuery(query, () => {
usersApi(filters)
})
}
and this is where I am using this in my component:
import React, { useState } from 'react'
import { Table } from 'antd'
import { useCreateProfile } from '_services/CashierProfile'
const columns = [
{
title: 'Day',
dataIndex: 'day',
key: 'day',
},
{
title: 'Shift',
dataIndex: 'shift',
key: 'shift',
},
{
title: 'startTime',
dataIndex: 'start',
key: 'start',
},
{
title: 'endTime',
dataIndex: 'end',
key: 'end',
},
{
title: 'Mart',
dataIndex: 'mart',
key: 'mart',
},
]
const CashierShifts = () => {
const { data, isError, isLoading, isSuccess } = useCreateProfile()
console.log(data, 'react-query')
const [result, setResult] = useState([
{
id: 54,
tile: 'slots 1',
date: '22-10-2203',
startTime: '8:00',
mart: {
id: 21,
martName: 'Johar Town',
},
endTime: '12:00',
cashier: {
name: 'Jamal',
id: 54,
},
},
{
id: 54,
tile: 'slots 1',
date: '22-10-2203',
startTime: '8:00',
mart: {
id: 21,
martName: 'Johar Town',
},
endTime: '12:00',
cashier: {
name: 'Jamal',
id: 54,
},
},
{
id: 54,
tile: 'slots 1',
date: '22-10-2203',
startTime: '8:00',
mart: {
id: 21,
martName: 'Johar Town',
},
endTime: '12:00',
cashier: {
name: 'Jamal',
id: 54,
},
},
{
id: 54,
tile: 'slots 1',
date: '22-10-2203',
startTime: '8:00',
mart: {
id: 21,
martName: 'Johar Town',
},
endTime: '12:00',
cashier: {
name: 'Jamal',
id: 54,
},
},
])
const dataSource = result.map((a) => ({
day: a.date,
shift: a.tile,
start: a.startTime,
end: a.endTime,
mart: a.mart.martName,
}))
return (
<div>
<Table columns={columns} dataSource={dataSource} />
</div>
)
}
export default CashierShifts
the problem is when i am using my react query hook in my component but the data is returning undefined here.
const { data, isError, isLoading, isSuccess } = useCreateProfile()
console.log(data, 'react-query')
return useQuery(query, () => {
return usersApi(filters)
})
I'm experiencing some difficulty with trying to map through an objects property which is an array of objects. I get back an error message that .map is undefined, basically saying there is no array. The array i want to map through is education. At times I also get a proxy error that the route is timing out and this loses the profile data i'm fetching and the profile object is empty. Is there anyway to fix this too.
My model:
import mongoose from 'mongoose'
const profileSchema = new mongoose.Schema(
{
experience: [
{
title: {
type: String,
required: true,
},
company: {
type: String,
required: true,
},
location: {
type: String,
},
from: {
type: Date,
required: true,
},
to: {
type: Date,
},
current: {
type: Boolean,
default: false,
},
description: {
type: String,
},
},
],
education: [
{
level: {
type: String,
required: true,
enum: [
'None',
'GCSE or equivalent',
'A-Level or equivalent',
'Certificate of Higher Education',
'Diploma of Higher Education',
'Bachelors',
'Masters',
'PhD',
],
},
school: {
type: String,
required: true,
},
fieldofstudy: {
type: String,
required: true,
},
city: {
type: String,
required: true,
},
from: {
type: Date,
required: true,
},
to: {
type: Date,
},
current: {
type: Boolean,
default: false,
},
},
],
skills: [
{
name: {
type: String,
required: true,
},
yearsExperience: {
type: Number,
required: true,
},
},
],
additionalInfo: {
desiredJobTitle: {
type: String,
},
desiredJobType: {
type: [String],
},
desiredSalary: {
type: Number,
},
readyToWork: {
type: Boolean,
default: false,
},
relocate: {
type: Boolean,
default: false,
},
},
savedJobs: [
{
type: mongoose.Schema.Types.ObjectId,
ref: 'Job',
},
],
user: {
type: mongoose.Schema.Types.ObjectId,
ref: 'User',
},
},
{ timestamps: true }
)
const Profile = mongoose.model('Profile', profileSchema)
export default Profile
My action:
import axios from 'axios'
import {
PROFILE_DETAILS_REQUEST,
PROFILE_DETAILS_SUCCESS,
PROFILE_DETAILS_FAIL,
PROFILE_CREATE_REQUEST,
PROFILE_CREATE_SUCCESS,
PROFILE_CREATE_FAIL,
PROFILE_CREATE_EDUCATION_REQUEST,
PROFILE_CREATE_EDUCATION_SUCCESS,
PROFILE_CREATE_EDUCATION_FAIL,
} from '../constants/profileConstants'
import { setAlert } from './alertActions'
export const getCurrentProfile = () => async (dispatch, getState) => {
try {
dispatch({ type: PROFILE_DETAILS_REQUEST })
const {
userLogin: { userData },
} = getState()
const config = {
headers: {
Authorization: `Bearer ${userData.token}`,
},
}
const { data } = await axios.get('/api/v1/profile/me', config)
dispatch({
type: PROFILE_DETAILS_SUCCESS,
payload: data,
})
} catch (error) {
dispatch({
type: PROFILE_DETAILS_FAIL,
payload:
error.response && error.response.data.error
? error.response.data.error
: null,
})
}
}
My reducer:
export const profileDetailsReducer = (state = { profile: {} }, action) => {
switch (action.type) {
case PROFILE_DETAILS_REQUEST:
return {
...state,
loading: true,
}
case PROFILE_DETAILS_SUCCESS:
return {
loading: false,
profile: action.payload,
}
case PROFILE_DETAILS_FAIL:
return {
loading: false,
error: action.payload,
}
case PROFILE_DETAILS_RESET:
return {
profile: {},
}
default:
return state
}
}
My dashboard component:
import React, { useEffect } from 'react'
import Moment from 'react-moment'
import { useDispatch, useSelector } from 'react-redux'
import { getCurrentProfile } from '../actions/profileActions'
import Loader from '../components/layout/Loader'
import DashboardActions from '../components/dashboard/DashboardActions'
const Dashboard = ({ history }) => {
const dispatch = useDispatch()
const profileDetails = useSelector((state) => state.profileDetails)
const { loading, error, profile } = profileDetails
const userLogin = useSelector((state) => state.userLogin)
const { userData } = userLogin
console.log(profile)
useEffect(() => {
if (!userData) {
history.push('/login')
} else {
dispatch(getCurrentProfile())
}
}, [dispatch, history, userData])
return (
<>
<h1 class='mb-4'>Dashboard</h1>
<p>Welcome {userData && userData.name}</p>
<br />
{loading ? (
<Loader />
) : (
<>
<DashboardActions />
<h2 className='my-2'>Education Details</h2>
<table className='table'>
<thead>
<tr>
<th>Level</th>
<th>Field of study</th>
<th>School</th>
</tr>
</thead>
<tbody>{profile.education.map((edu) => console.log(edu))}</tbody>
</table>
</>
)}
</>
)
}
export default Dashboard
Issue
state.profile.educatioin is undefined in your initial state.
export const profileDetailsReducer = (state = { profile: {} }, action) => { ...
Solution(s)
Define an initial state that contains an education array
const initialState = {
profile: {
education: [],
},
};
export const profileDetailsReducer = (state = initialState, action) => { ...
Or provide a fallback value from your selector
const { loading, error, profile: { education = [] } } = profileDetails;
...
<tbody>{education.map((edu) => console.log(edu))}</tbody>
Or provide the fallback in the render
<tbody>{(profile.education ?? []).map((edu) => console.log(edu))}</tbody>
I'm new to react-redux, I was working on a tutorial and I wanted to add a few features of my own.
How do I add a new method to add a new song to the existing array of song objects > I was confused because theres already a song key in combine reducers. What should I return/pass as a parameter to add a new song?
import { combineReducers } from "redux";
const songsReducer = () => {
return [
{
title: "song one",
duration: "4:30"
},
{
title: "song one",
duration: "4:00"
},
{
title: "song one",
duration: "3:28"
},
{
title: "song one",
duration: "3:50"
}
];
};
const selectedSongReducer = (selectedSong = null, action) => {
if (action.type === "SONG_SELECTED") {
return action.payload;
}
return selectedSong;
};
**const addSong = () => {};** // need help with this function
export default combineReducers({
songs: songsReducer,
selectedSong: selectedSongReducer
});
const addSong = song => ({
type: 'ADD_SONG',
payload: song,
});
const songsReducer = (songs = [], action) => {
switch (action.type) {
case 'ADD_SONG': {
return [...songs, action.payload.song]; //immutable
}
default: {
return [
{
title: 'song one',
duration: '4:30',
},
{
title: 'song one',
duration: '4:00',
},
{
title: 'song one',
duration: '3:28',
},
{
title: 'song one',
duration: '3:50',
},
];
}
}
};
The action will return a song with type ADD_SONG:
const addSong = (song) => {
return {
type: "ADD_SONG",
payload: {
song
}
}
}
In reducer:
const selectedSongReducer = (selectedSong = [], { type, payload = {} }) => {
if (type === "SONG_SELECTED") {
return payload;
}
if (type === "ADD_SONG") {
return [...selectedSong].push(payload.song) // Imutable selectedSong
}
return selectedSong;
};
Always use switch case for cleaner code
and return like this return [...selectedSong, action.payload];
to avoid mutation
const addSong = (song) => {
return {
type: "ADD_SONG",
payload: {
song
}
}
}
const selectedSongReducer = (selectedSong = [], action) => {
switch (action.type) {
case 'SONG_SELECTED': {
return [...selectedSong, action.payload.song];
}
default: null
}
};
const songsReducer = (song = [], action) => {
switch (action.type) {
case 'ADD_SONG': {
return [...songs, action.payload.song];
}
default: {
return [
{
title: 'song one',
duration: '4:30',
},
{
title: 'song one',
duration: '4:00',
},
{
title: 'song one',
duration: '3:28',
},
{
title: 'song one',
duration: '3:50',
},
];
}
}
};
I have a component that behaves like one in Google drive, when you want to move your file/folder. It fetches all the necessary data about directories, displays it, and after one have been chosen - it moves a file into another folder. The goal I'm trying to aim is update data about currently displayed folder and folder where file has been moved. I tried the both way (refetchQueries, update), but non worked...
The main issue is that queries, defined in updateQueries are executed, but store doesn't update.
It would be great, if anyone could help!
const EntityMoveContainer = compose(
graphql(GET_DIRECTORIES, {
options() {/*...*/},
props(props) {/*...*/}
}),
graphql(MOVE_FILE, {
props(props) {
const { mutate, ownProps } = props;
const { entity, directoryId } = ownProps;
return {
async moveFile(destDirId) {
return mutate({
variables: {
fileId: entity.id,
directoryId: destDirId,
},
refetchQueries: () => [
{
query: GET_DIRECTORIES,
variables: {
id: directoryId,
sortKey: store.sortKey,
cursor: store.cursor,
filetype: store.filetype,
},
},
{
query: GET_DIRECTORIES,
variables: {
id: destDirId,
sortKey: store.sortKey,
cursor: store.cursor,
filetype: store.filetype,
},
},
],
/* update(proxy) {
console.log('update method');
try {
const storeData = proxy.readQuery({
query: GET_DIRECTORIES,
variables: {
id: destDirId,
sortKey: store.sortKey,
filetype: store.filetype,
cursor: store.cursor,
},
});
storeData.directory = {
...storeData.directory,
files: {
...storeData.directory.files,
edges: [
...storeData.directory.files.edges,
{ node: entity, __typename: 'File' },
],
},
};
proxy.writeQuery({
query: GET_DIRECTORIES,
variables: {
id: destDirId,
sortKey: store.sortKey,
filetype: store.filetype,
cursor: store.cursor,
},
data: storeData,
});
} catch (e) {
console.log(e);
}
}, */
});
},
};
},
}),
)(EntityMoveView)
The issue was with a
cursor : ''
property I passed into refetchQueries.