score:1
for me it worked when i refetched the currentuser query in my login mutation. i added my code below. maybe it helps:
onsubmit(event) {
event.preventdefault();
const { email, password } = this.state;
this.props
.mutate({
variables: { email, password },
update: (proxy, { data }) => {
// get token from response and set it to the localstorage
localstorage.setitem('token', data.login.jwt);
},
refetchqueries: [{ query: currentuser }]
})
.catch((res) => {
const errors = res.graphqlerrors.map(error => error.message);
this.setstate({ errors });
});
}
score:2
i think you might be able to solve this issue by setting the query's fetchpolicy to "cache-and-network". you can read about fetch policies here: "graphql query options.fetchpolicy"
in your specific case i think you can update this line
const privateroute = graphql(mequery, { name: 'mequery' })(proute)
to this:
const privateroute = graphql(mequery, { name: 'mequery', options: {fetchpolicy: 'cache-and-network'} })(proute)
explanation
as stated in the documentation, the default policy is cache-first.
- currentuser is queried the first time and it updates the cache.
- you execute the login mutation, the cache is not updated without you updating it (read about it here: "updating the cache after a mutation").
- currentuser query is executed again but due to the default cache-first policy the outdated result will be retrieved only from the cache.
from the official documentation:
cache-first: this is the default value where we always try reading data from your cache first. if all the data needed to fulfill your query is in the cache then that data will be returned. apollo will only fetch from the network if a cached result is not available. this fetch policy aims to minimize the number of network requests sent when rendering your component.
cache-and-network: this fetch policy will have apollo first trying to read data from your cache. if all the data needed to fulfill your query is in the cache then that data will be returned. however, regardless of whether or not the full data is in your cache this fetchpolicy will always execute query with the network interface unlike cache-first which will only execute your query if the query data is not in your cache. this fetch policy optimizes for users getting a quick response while also trying to keep cached data consistent with your server data at the cost of extra network requests.
in addition to these two there are two more policies: 'network-only' and 'cache-only' here's the link to the documentation
Source: stackoverflow.com
Related Query
- Apollo Client V2 fetches data the wrong order
- Is there a way to detect when data used by a query is evicted from the Apollo Client cache?
- Apollo Client client.readQuery returning null when data is in the cache
- Apollo query has the wrong data from cache
- Trigger same query multiple times with apollo client fetchMore Apollo Client and append the data
- Data becomes undefined in usequery of apollo client only when refreshing the page in the browser
- Apollo client v3 "Cache data may be lost when replacing the field X of a Y object"
- How to make a second api call with data received from the first api call in Apollo client with React?
- How to fetch data only once in a Next.js app and make it accesible to all the app, both in server and client
- How do I reset the useMutation hook of Apollo Client
- How to sort the data in asc and desc order in table
- Issue with refetchQueries in the Apollo Client useMutation hook
- ReactJS/Nivo Graphs - How to modify the x-axis to be ascending date order when data contains "incomplete" data?
- Apollo GraphQL, is there a way to manipulate the data that is being written to the cache during querying?
- How does Apollo Client + Server handle duplicate related nodes in the same query?
- Apollo Client Reactive variables - not trigger re render after updating the value
- React renders the wrong data when deleting the item in the middle of the list
- When the data that Apollo fetched is ready with React & GraphQL
- How to use the global data from React inside Apollo client's initialization?
- React Apollo Client - modify query data before it goes to cache
- Apollo Client useMutation data always returns undefined
- Updating a table with react.js results in the wrong row order
- How to enhance the response in apollo client with react only once
- Why is my data that is coming from apollo server not showing up when I refresh the page?
- useEffect: How to put data in the state in order
- How to pass data from React client into the Oauth2.0 Google strategy flow with passport.js
- How to force Apollo Client to use cached data for detail view page
- How can I retrieve data from Meteor collection on the client side with React?
- Apollo client saving user data
- How to make a GraphQL lazy query with Apollo client after the first query is successful
More Query from same tag
- Disable autofill forms with React and Material UI
- Using Array.from in Typescript received function is not defined error
- after adding lodash debounce react (onchange event.target.value dont working )
- How to access objects inside an array of JSON object?
- Why does storing a timeout in React context not work?
- I can't use the apploading on my react native. It wont work properly
- React Error: Nothing was returned from render
- Cannot specify a name to CSVDownload file
- ReactJS typescript error Parameter props implicitly has 'any' type
- How to combine side menu with tab navigation in Ion React
- Backgroung-image as a prop in a styled component - Typescript and Next.js
- NavLink component in React-Router-DOM not accepting style prop with function
- Countdown timer to 5 minutes from current date
- Map function doesn't render elements
- Writing Reducer using typescript. How can I correct the error?
- unable to retrieve the values from the specific thing
- Should the arguments passed to react-query's useQuery hook be referentially stable?
- React: Clean-Up function never called
- NextJS useRouter error when used inside function body
- Unable to import a component using material-ui via webpack module federation
- Render React page dynamically using URL parameter
- Trying to send form data from React.js form to Flask API, yet it doesn't allow to submit to MongoDB
- How do I use material-ui themed error style (color) for non-form text
- How can we use the CDN URL mechanism for package management if we use Typescript?
- module.exports not working ES6
- how to toggle class on scroll event in react?
- Display array of images in react?
- how to map json data in dropdown list (Functional component)?
- Error Router inside Router in React + Electron
- Setting the width for the react-mapbox-gl