I faced with a problem while I was coding about Google sign-in line. I wrote these lines:
const Login = () => {
const navigate = useNavigate();
const responseGoogle = (response) => {
localStorage.setItem('user', JSON.stringify(response.profileObj))
const { name, googleId, imageUrl } = response.profileObj;
const doc = {
_id: response.profileObj.googleId,
_type: 'user',
userName: response.profileObj.name,
image: response.profileObj.imageUrl,
}
client.createIfNotExists(doc)
.then(() => {
navigate('/', { replace: true })
});
}
But when I am looking through console log, I see there is appearing
Uncaught TypeError: Cannot destructure property 'name' of
'response.profileObj' as it is undefined.
So what kind of solutions do you offer for me? Btw also these code should direct me to the main page after log in with my email but it also doesn't work.
You can add a null check like this.
const Login = () => {
const navigate = useNavigate();
const responseGoogle = (response) => {
localStorage.setItem("user", JSON.stringify(response.profileObj));
if (response.profileObj) {
const { name, googleId, imageUrl } = response.profileObj;
const doc = {
_id: response.profileObj.googleId,
_type: "user",
userName: response.profileObj.name,
image: response.profileObj.imageUrl,
};
client.createIfNotExists(doc).then(() => {
navigate("/", { replace: true });
});
}
};
};
Else if you provide type of the profileObj it wont throw that error
Your response.profileObj seems to be undefined
Are you sure you passed the profileObj property in the response object?
Related
I have two different endpoints, one that is called with getProjectMapping and one with getStaffing. The getProjectMapping query must be run first in order to set the project variable, which will then be used to make the getStaffing request. But I get the following error:
Uncaught TypeError: project is null
I get that error in the getStaffing request, although before activating it I check that the project is not null. Does anyone know what is wrong?
const Staffing = () => {
const { tokenApi } = useContext(LoginContext);
const [project, setProject] = useState(null);
const {
data: projectMapping,
isLoading: projectMappingIsLoading,
isFetching,
} = useQuery("ProjectMapping", () => getProjectMapping(tokenApi), {
onSuccess: () => {
if (projectMapping != null && projectMapping.length !== 0) {
setProject(projectMapping[0]);
}
},
});
const { data, isLoading } = useQuery(
[project.value, "Staffing"],
() => getStaffing(project.value, tokenApi),
{
enabled: !isFetching && project != null,
dependencies: [project],
}
);
}
This isn't how you structure dependent queries.. Instead of setting state you should derive it. If you have dependent queries it might also make sense to wrap them in a custom hook
e.g.
const useProjectStaffing = (tokenApi) => {
const {
data: [project] = [],
isLoading: projectMappingIsLoading,
} = useQuery("ProjectMapping", () => getProjectMapping(tokenApi), {
},
});
const projectValue = project && project.value
return useQuery(
[projectValue, "Staffing"],
() => getStaffing(projectValue, tokenApi),
{ enabled: !!projectValue }
);
}
const Staffing = () => {
const { tokenApi } = useContext(LoginContext);
const {isLoading, data: staffing} = useProjectStaffing(tokenApi);
// ... do stuff with the staffing data when it comes back.
I need help retrieving firebase data in React Native, using expo.
This code works fine when I refresh the app, but when it first starts, it throws an error:
Error: Error: Client is offline.
Maybe I need to do it async and await, I have tried some ways, but no success.
componentDidMount = async () => {
var radioFireData = null;
const { names } = this.props;
const dbRef = ref(db, "records/");
get(child(dbRef, "flap/"))
.then((snapshot) => {
if (snapshot.exists()) {
radioFireData = snapshot.val();
this.setState({ checked: radioFireData[names] });
} else {
console.log("No data available");
}
})
.catch((error) => {
console.log(error);
});
};
Here it is... Maybe I can help someone.
componentDidMount(){
const { names } = this.props;
const reference = ref(db, "records/" + "/flap/");
onValue(
reference,
(snapshot) => {
const data = snapshot.val();
this.setState({ checked: data[names] });
},
{
onlyOnce: true,
}
);
};
I'm trying to keep session stayed logged in after refreshing the browser. The user data that is being fetched is not rendering after being fetched. The console is saying "Cannot read properties of undefined (reading 'user'). This is my code for the login/sign up page.
The data I'm trying to access is in the picture below:
(Auth.js)
const Auth = () => {
const navigate = useNavigate();
const dispatch = useDispatch();
const [isSignup, setIsSignup] = useState(false);
const [inputs, setInputs] = useState({
name: "",
username: "",
email: "",
password: ""
})
const handleChange = (e) => {
setInputs(prevState => {
return {
...prevState,
[e.target.name]: e.target.value
}
})
}
const sendRequest = async (type = '') => {
const res = await axios.post(`/user/${type}`, {
name: inputs.name,
email: inputs.email,
username: inputs.username,
password: inputs.password,
}).catch(error => console.log(error))
const data = await res.data;
console.log(data)
return data;
}
const handleSubmit = (e) => {
e.preventDefault()
console.log(inputs)
if (isSignup) {
sendRequest("signup")
.then((data) => {
dispatch(authActions.login());
localStorage.setItem('userId', data.user._id);
navigate("/posts");
});
} else {
sendRequest("login")
.then((data) => {
dispatch(authActions.login());
localStorage.setItem('userId', data.user._id);
navigate("/posts");
});
}
}
Redux store file
const authSlice = createSlice({
name: "auth",
initialState: { isLoggedIn: false },
reducers: {
login(state) {
state.isLoggedIn = true
},
logout(state) {
state.isLoggedIn = false
}
}
})
export const authActions = authSlice.actions
export const store = configureStore({
reducer: authSlice.reducer
})
Chaining promises using .then() passes the resolved value from one to the next. With this code...
sendRequest("...")
.then(() => dispatch(authActions.login()))
.then(() => navigate("/posts"))
.then(data => localStorage.setItem('token', data.user))
You're passing the returned / resolved value from navigate("/posts") to the next .then() callback. The navigate() function returns void therefore data will be undefined.
Also, your redux action doesn't return the user so you can't chain from that either.
To access the user data, you need to return it from sendRequest()...
const sendRequest = async (type = "") => {
try {
const { data } = await axios.post(`/user/${type}`, { ...inputs });
console.log("sendRequest", type, data);
return data;
} catch (err) {
console.error("sendRequest", type, err.toJSON());
throw new Error(`sendRequest(${type}) failed`);
}
};
After that, all you really need is this...
sendRequest("...")
.then((data) => {
dispatch(authActions.login());
localStorage.setItem('userId', data.user._id);
navigate("/posts");
});
Since you're using redux, I would highly recommend moving the localStorage part out of your component and into your store as a side-effect.
My code looks like this:
interface MutationProps {
username: string;
Mutation: any;
}
export const UseCustomMutation: React.FC<MutationProps> | any = (username: any, Mutation: DocumentNode ) => {
const [functionForDoingAction, { data, loading, error }] = useMutation(
Mutation,
{
variables: {
username,
},
}
);
useEffect(() => {
// fn trigger for change data
functionForDoingAction({
variables: {
username: username,
},
});
console.log(JSON.stringify(data));
console.log(JSON.stringify(error, null, 2));
}, []);
if (loading) return "loading...";
if (error) return `Submission error! ${error.message}`;
return data;
};
export const DisplayUser = () => {
const GET_USER = gql`
mutation GetUser($username: String!) {
getUser(username: $username) {
pfp
username
password
age
CurrentLive
ismod
description
fullname
}
}
`;
const { username }: { username: any } = useParams();
const MyData = UseCustomMutation(username, GET_USER);
console.log(JSON.stringify(MyData));
I wanna a access MyData.pfp but it gives me this error:
TypeError: Cannot read property 'pfp' of undefined
if it matters when i go on e.g. localhost:3000/user/dakepake variable MyData looks like this:
UserProfile.tsx:39 {"getUser":{"pfp":""https://i.pinimg.com/564x/65/25/a0/6525a08f1df98a2e3a545fe2ace4be47.jpg"","username":""dakepake"","password":""mohikanac10"","age":14,"CurrentLive":"""","ismod":false,"description":""this user dont have a bio yet"","fullname":""damjan alimpic"","__typename":"GetUserResponse"}}
How can I fix this?
i fixed this on my own , i just replaced MyData.pfp whit MyData.getUser.pfp and now its working
I am writing tests and I do not know js well, but I need to find the answer quickly. In the courses, I have not reached this point yet, or maybe I just don’t understand. Please help me figure out what I'm doing wrong.
I have two questions:
The test starts working as soon as I delete the line:
.then((response) => {
authId = response.body.result.sessions[0].authId;
});
if you do not delete this line, an error appears:
TypeError: Cannot read property 'sessions' of undefined
How to write so that the fields are optional, that is, you can pass, or you can not pass
(props: { authId: string; deviceId: string })
This is the response.body I am trying to parse:
{
"result": {
"sessions": [
{
"type": "web",
"authId": "jRXtO7oNiBR5Ldeq",
"platform": "platform",
"application": "application",
"seenAt": 1592052380
}
],
"integrations": []
},
"success": true
}
My code:
import { agent } from 'supertest';
import { config } from '../../config';
import { getSsoId } from '../../helpers/getUserFromGenesis';
describe('First', () => {
let id;
let authId;
beforeEach(async () => {
id = await getId();
});
const userAuthorizations = (fn: (response: any) => void) =>
agent(config.baseUrl)
.get(`users/${id}/authorizations?client_id=test`)
.auth(config.user, config.pass)
.expect((response) => {
fn(response);
});
const deleteUserAuthorizations = (props: { authId: string; deviceId: string }) =>
agent(config.baseUrl)
.delete(`users/authorizations`)
.auth(config.user, config.pass)
.send(props)
.expect((response) => {
expect(response.body.result.success).toEqual(true);
});
const getSession = () =>
agent(config.tokenQaUrl)
.post(`/token`)
.auth(config.user, config.pass)
.send({
clientId: 'test',
userId: id,
})
.expect((response) => {
expect(response.body.sessionId).not.toEqual('');
expect(response.body.sessionId).not.toEqual(null);
})
.then((response) => {
authId = response.body.result.sessions[0].authId;
});
it('test', async () => {
await getSession().then(() =>
userAuthorizations((response) => {
expect(response.body.result.sessions.length).toBeGreaterThan(0);
}),
);
});
});
As discussed in the comment
It seems like some time your response is getting the JSON data in the way which you are trying to access, but some time its not. Its better to add conditions before trying to access data where the JSON is not of fixed structure.
To make these property optional just add ?
it will make the properties option
props: { authId?: string; deviceId?: string }
I am a bit unclear on your question. There are some good answers up top.
In case you are trying to avoid a "property of undefined error" you can do something like this:
authId = response?.body?.result?.sessions[0]?.authId;
it prevents the error. Ideally you would type-check all of them.