useQuery: data undefined - graphql

Question

my problem is quite strange. When I call a query in graphiql it works. As soon as I do it in my React app it doesn't. Question marked in code: When I log just dataCategories I get the object. When I try to log dataCategories.allCategories then I get the error "dataCategories undefined". I absolutely have no clue what is going on here...
const NEW_TWEET = gql`
mutation createTweet($title: String!, $content: String!) {
createTweet(input: { title: $title, content: $content }) {
_id
title
content
date
}
}
`;
const TWEETS_QUERY = gql` {
allTweets {
_id
title
content
date
}
}`;
const CATEGORIES_QUERY = gql` {
allCategories {
_id
label
}
}`;
const NewTweet = () => {
let history = useHistory();
const [title, setTitle] = useState("");
const [content, setContent] = useState("");
const [createTweet] = useMutation(NEW_TWEET, {
update(
cache,
{data: {createTweet}}
) {
const {allTweets} = cache.readQuery({ query: TWEETS_QUERY });
cache.writeQuery({
query: TWEETS_QUERY,
data: { allTweets: allTweets.concat([createTweet])}
});
}
});
const { loading: loadingCategories, error: errorCategories, data: dataCategories } = useQuery(CATEGORIES_QUERY);
console.log(dataCategories));
////// When I log just dataCategories I get the object. When I try to log dataCategories.allCategories then I get the errer "dataCategories undefined".
return (
<div className="container m-t-20">
<h1 className="page-title">New Tweet</h1>
<div className="newnote-page m-t-20">
<form onSubmit={e => {
e.preventDefault();
createTweet({
variables: {
title,
content,
date: Date.now()
}
});
notify.show("Tweet was created succuessfully.", "success")
history.push('/');
}
}>
<div className="field">
<label className="label">Tweet Title</label>
<div className="control">
<input name="title" className="input" type="text" placeholder="Tweet Title" value={title} onChange={e => setTitle(e.target.value)} />
</div>
</div>
<div className="field">
<label className="label">Tweet Content</label>
<div className="control">
<textarea name="content" className="textarea" rows="10" placeholder="Tweet Content here..." value={content} onChange={e => setContent(e.target.value)}></textarea>
</div>
{/*} <Autocomplete
multiple
id="tags-outlied"
options={dataCategories.allCategories}
getOptionLabel={(option) => option.label}
filterSelectedOptions
renderInput={(params) => (
<TextField
{...params}
label="Kategorien"
placeholder="Kategorien"
/>
)}
/>*/}
<div className="field">
<div className="control">
<button className="button is-link">Submit</button>
</div>
</div>
</form>
</div>
</div>
);
}
export default NewTweet;
The schema is:
import { makeExecutableSchema } from "#graphql-tools/schema";
import { resolvers } from "./resolvers";
const typeDefs = `
type Tweet {
_id: ID!,
title: String!,
date: Date,
content: String!
}
scalar Date
type Category {
_id: ID!,
label: String!
}
type Query {
getTweet(_id: ID!) : Tweet
allTweets : [Tweet]
getCategory(Cat: ID!) : Category
allCategories : [Category]
}
input TweetInput {
title: String!,
content: String!
}
input CategoryInput {
label: String!
}
input TweetUpdateInput {
title: String,
content: String
}
type Mutation {
createTweet(input: TweetInput) : Tweet
updateTweet(_id: ID!, input: TweetUpdateInput) : Tweet
deleteTweet(_id: ID!) : Tweet
createCategory(input: CategoryInput) : Category
deleteCategory(_id: ID!) : Category
}
`;
const schema = makeExecutableSchema({
typeDefs,
resolvers
});
export default schema;
The resolvers are:
import Category from './models/category'
export const resolvers = {
Query : {
async getTweet(root, { _id }) {
return await Tweet.findById(_id);
},
async allTweets() {
return await Tweet.find();
},
async getCategory(root, {_id}) {
return await Category.findById(_id);
},
async allCategories() {
return await Category.find();
}
},
Mutation : {
async createTweet(root, { input }) {
return await Tweet.create(input);
},
async updateTweet(root, { _id, input }) {
return await Tweet.findOneAndUpdate({_id}, input, {new: true});
},
async deleteTweet(root, {_id}) {
return await Tweet.findOneAndRemove({_id});
},
async createCategory(root, { input }) {
return await Category.create(input);
},
async deleteCategory(root, {_id}) {
return await Category.findOneAndRemove({_id});
}
}
}

Answer 1

Assuming there is no error in the query, this seems to be quite normal. The first time React renders your component, the query will not have fired. And then it may be in flight (so loadingCategories would be true). You should never assume that the results from a query (data) will not be null/undefined. You should always guard against it and display an appropriate UI unless/until data is not null.