Skip to main content


The underlying atom effect for syncing a Recoil atom with a GraphQL query. It initializes an atom based on the results of a GraphQL query and subscribes to local mutations or updates.

If you would like to subscribe to updates that are initiated by the server consider using graphQLSubscriptionEffect() and GraphQL subscriptions instead.

function graphQLQueryEffect<
TVariables: Variables,
TData: $ReadOnly<{[string]: mixed}>,
T = TData,
TRawResponse = void,
environment: IEnvironment | EnvironmentKey,
query: Query<TVariables, TData, TRawResponse>,
variables: TVariables | null,
mapResponse: TData => T,
}): AtomEffect<T>
  • environment: The Relay Environment or an EnvironmentKey to match with the environment provided with <RecoilRelayEnvironemnt>.
  • query: The GraphQL query to query. Fragments are supported in queries.
  • variables: Variables object provided as input to the GraphQL query. If null, then skip query and use the default atom value.
  • mapResponse: Callback to map the query response to the atom value.

const myAtom = atom({
key: 'MyQuery',
effects: [
environment: myEnvironment,
query: graphql`
query MyEventQuery($id: ID!) {
myevent(id: $id) {
variables: {id: 123},