React: Data not showing until page refreshes - reactjs

Question

I am currently building a simple CRUD workflow using React and GraphQL. After I create an object (an article in this case which just has an id, title and description.), I navigate back to an Index page which displays all of the currently created articles. My issue is that after an article is created, the index page does not display the created article until I refresh the page. I am using apollo to query the graphql api and have disabled cacheing on it so I'm not sure why the data isn't displaying. I've set breakpoints in my ArticlesIndex's componentDidMount function and ensured that it is executing and at the time of executing, the database does include the newly added article.
My server side is actually never even hit when the client side query to retrieve all articles executes. I'm not sure what is cacheing this data and why it is not being retrieved from the server as expected.
My ArticlesCreate component inserts the new record and redirects back to the ArticlesIndex component as follows:
handleSubmit(event) {
event.preventDefault();
const { client } = this.props;
var article = {
"article": {
"title": this.state.title,
"description": this.state.description
}
};
client
.mutate({ mutation: CREATE_EDIT_ARTICLE,
variables: article })
.then(({ data: { articles } }) => {
this.props.history.push("/articles");
})
.catch(err => {
console.log("err", err);
});
}
}
then my ArticlesIndex component retrieves all articles from the db as follows:
componentDidMount = () => {
const { client } = this.props; //client is an ApolloClient
client
.query({ query: GET_ARTICLES })
.then(({ data: { articles } }) => {
if (articles) {
this.setState({ loading: false, articles: articles });
}
})
.catch(err => {
console.log("err", err);
});
};
and I've set ApolloClient to not cache data as in my App.js as follows:
const defaultApolloOptions = {
watchQuery: {
fetchPolicy: 'network-only',
errorPolicy: 'ignore',
},
query: {
fetchPolicy: 'network-only',
errorPolicy: 'all',
},
}
export default class App extends Component {
displayName = App.name;
client = new ApolloClient({
uri: "https://localhost:44360/graphql",
cache: new InMemoryCache(),
defaultOptions: defaultApolloOptions
});
//...render method, route definitions, etc
}
Why is this happening and how can I solve it?

Answer 1

It looks like this is an issue with ApolloBoost not supporting defaultOptions as noted in this github issue. To resolve the issue I changed:
const defaultApolloOptions = {
watchQuery: {
fetchPolicy: 'network-only',
errorPolicy: 'ignore',
},
query: {
fetchPolicy: 'network-only',
errorPolicy: 'all',
},
}
export default class App extends Component {
displayName = App.name;
client = new ApolloClient({
uri: "https://localhost:44360/graphql",
cache: new InMemoryCache(),
defaultOptions: defaultApolloOptions
});
//...render method, route definitions, etc
}
To:
const client = new ApolloClient({
uri: "https://localhost:44360/graphql"
});
client.defaultOptions = {
watchQuery: {
fetchPolicy: 'network-only',
errorPolicy: 'ignore',
},
query: {
fetchPolicy: 'network-only',
errorPolicy: 'all',
},
};
export default class App extends Component {
//....
}

Answer 2

I can see that you are getting the data and setting your components state on initial mount. Most probably when you redirect it doesn't fire the componentDidMount lifecylcle hook as it is already mounted, if that is the issue try using componentDidUpdate lifecycle hook so that your component knows there was an update and re-set the data.