refetchQueries after mutation

[tokenvolt]

Intended outcome:

I'm trying to refetch some queries after the mutation and I expect them to be executed.

Actual outcome:

refetchQueries are not working as they are described in the docs

How to reproduce the issue:

mutate({
  mutation: LOGIN_MUTATION,
  variables: {
    ...values
  },
  refetchQueries: [USER_QUERY]
})

LOGIN_MUTATION and USER_QUERY are strings in graphql syntax. I don't see USER_QUERY gets executed after the mutation.

[n1ru4l]

From the documentation:

A list of query names which will be refetched once this mutation has

Also you will have to convert your LOGIN_MUTATION graphql strings to a GraphQL AST by using graphql-tag

It should look like this:

import gql from 'graphql-tag'

const USER_QUERY = gql`
  query currentUser {
    id
    login
  }
`

const LOGIN_MUTATION = gql`
  mutation login {
    login(login: "foobars")
  }
`
[...]

mutate({
  mutation: LOGIN_MUTATION,
  variables: {
    ...values
  },
  refetchQueries: [`currentUser`]
})

[tokenvolt]

I'm using graphql-loader and writing mutations and queries in separate graphql files. How should I approach this way? BTW I've tried to use gql and use the name of the query, but it doesn't work as well.

[n1ru4l]

then you should probably create a reproduction with https://github.com/apollographql/react-apollo-error-template . I never used refetchQueries so my knowledge is limited to the documentation 😞

[lucfranken]

See also: #1697 where I tried to figure out the same problem. Did not find a really good solution yet but it may give you some insight in the options.

[jbaxleyiii]

@tokenvolt I think this may be a shape issue within refetchQueries. Can you try

refetchQueries: [
{ query: USER_QUERY }
]

The object is needed in order to support things like variable changes

[tokenvolt]

@jbaxleyiii still no luck

[jbaxleyiii]

@tokenvolt do you think you could create a simple reproduction for this? We have an error template and code sandbox listed in the issue template (try to create a new issue and it should be there) or a failing test?

[tokenvolt]

@jbaxleyiii I'll try to reproduce

[ctavan]

@tokenvolt FYI I was also not lucky with using the query-name based variant of refetchQueries. While it should work as expected there currently seems to be a race-condition which effectively prevents it from working, see #1821

In principle though, the query-name based refetchQueries is an expected feature, here's the implementation:

• apollo-client/src/core/QueryManager.ts

  Lines 351 to 355 in 3b5045d

  	if (typeof refetchQueries[0] === 'string') {
  	(refetchQueries as string[]).forEach(name => {
  	this.refetchQueryByName(name);
  	});
  	} else {

• apollo-client/src/core/QueryManager.ts

  Lines 1305 to 1322 in 3b5045d

  	// Refetches a query given that query's name. Refetches
  	// all ObservableQuery instances associated with the query name.
  	private refetchQueryByName(queryName: string) {
  	const refetchedQueries = this.queryIdsByName[queryName];
  	// Warn if the query named does not exist (misnamed, or merely not yet fetched)
  	if (refetchedQueries === undefined) {
  	console.warn(
  	`Warning: unknown query with name ${queryName} asked to refetch`,
  	);
  	return;
  	} else {
  	return Promise.all(
  	refetchedQueries.map(queryId =>
  	this.observableQueries[queryId].observableQuery.refetch(),
  	),
  	);
  	}
  	}

[tokenvolt]

Hey, guys, I figured out that it was an issue in my application. Sorry for bothering, as it was just a stupid mistake on my side. refetchQueries works as it was mentioned in #1900 (comment).

But I am too experiencing a race condition #1821

[stale]

This issue has been automatically marked as stale becuase it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to Apollo Client!

[stale]

This issue has been automatically closed because it has not had recent activity after being marked as stale. If you belive this issue is still a problem or should be reopened, please reopen it! Thank you for your contributions to Apollo Client!