[Modern] Query only the local client extension types will cause compiling error

[nightspirit]

Let's say I declare the client schema extensions

client.graphql

type Token {
  accessToken: String
  refreshToken: String
}

extend type Query {
  token: Token
}

And then in the QueryRenderer I made the query like this

query RootQuery {
  token {
    accessToken
    refreshToken
  }
}

The relay-compiler will fire the error

GraphQLCompilerContext: Unknown document `RootQuery`.

My temporary workaround is adding extra fields that can be fetched from remote.

query RootQuery {
  viewer {
    me {
      id
    }
  }
  token {
    accessToken
    refreshToken
  }
}

In this way, compiler can successfully compile the static query.

My assumption is relay-compiler will remove whatever client extensions from the query string, if I only query the local type, the query string will be stripped out entirely.

My question is "Is it possible for relay to query ONLY the local type?" People like me are excited about the client extensions is because it gives a way to get rid of the redux store. It will be really helpful if we can directly query the local type and use commitLocalUpdate for the state management.

[hisapy]

I can confirm the error and I'm also looking for the same functionality.

In my case is even a little bit more complex because my GraphQL API requires an accessToken and I have a UserConfirmationForm which I'd like to feed using a query to data in local schema. Currently, if I add server fields, then the compiler does not error but since the request lacks the accessToken when I render the component it receives a 401 response from server, without the data I expect from the local schema

[renatobenks-zz]

anyone can we help with this one? @leebyron @alloy

[hisapy]

In order to overcome this limitation I just add __typename to my local only queries.

[alloy]

@hisapy Can you elaborate on that by giving an example? (I’m not using this right now, so I’m only asking for the next reader that stumbles on this ticket.)

[hisapy]

In the following example, using __typename because currently relay-compiler can't query local extensions only. It can be any server field though but __typename fits because it's domain agnostic and it's just a String. By domain agnostic I mean you can use it no matter what your schema represents ... it's an introspection field.

const newUserFormQuery = graphql`
  query routes_NewUserQuery {
    __typename
    state: userForm {
      ...UserForm_state
    }
  }
`;

[nightspirit]

@hisapy Thanks for the workaround. It works for me.

Hopefully in the future we don't need the hack though.

[sibelius]

Relay v4 https://github.com/facebook/relay/releases/tag/v4.0.0

it has full support to client schema extensions: full GraphQL types as well

Added full support for client schema extensions: now full GraphQL types can be defined in the client schema (as opposed to just extending existing server types), and they will be properly retained during garbage collection when rendered

can you test this again? or add a repro so we can investigate further?

[jazblueful]

@sibelius I ran into this bug with v5.0.0

[sibelius]

can you provide a sample repro?

[jazblueful]

Types in local schema file:

type LocalState {
  id: ID!
  whatever: String
}

extend type Query {
  localState: LocalState
}

Use local-schema-only fields in a query in js:

import { graphql } from 'relay-runtime';

const query = graphql`
  query state_Query {
    localState {
      whatever
    }
  }
`;

when running relay-compiler you get:
GraphQLCompilerContext: Unknown document `state_Query`.

[sibelius]

does your file is called state.js?

where are you using this query?

[jazblueful]

yes, it's called state.js

I'm using it in the same file:

import { fetchQuery } from 'react-relay';
import { graphql } from 'relay-runtime';

const query = graphql`
  query state_Query {
    localState {
      whatever
    }
  }
`;

const getState = async environment => {
  return await fetchQuery(environment, query, {});
};

I also tried moving the query outside of the state.js, but that didn't help. I don't think it matters, where the query is.

hisapy's workaround works though:

query state_Query {
  __typename
  localState {
    whatever
  }
}

[jazblueful]

I don't know what the recommended way is for querying local-only fields, as the documentation is lacking in that part, but for now I have settled on this:

const getState = environment => {
  return environment.getStore().getSource().get('state');
};

It's synchronous and avoids the "GraphQLCompilerContext: Unknown document" bug without having to use any workarounds.

[sibelius]

you can try this one https://github.com/facebook/relay/blob/master/packages/react-relay/ReactRelayLocalQueryRenderer.js

LocalQueryRenderer

[jazblueful]

Ah cool, thanks!

I'll give it a try

[jazblueful]

I see ReactRelayLocalQueryRenderer only exports React component, but I need to access the local store before actually rendering anything.

[enisdenjo]

This issue is still present.

• babel-plugin-relay@6.0.0
• relay-compiler@6.0.0
• relay-runtime@6.0.0
• react-relay@6.0.0
• relay-compiler-language-typescript@7.0.0

# client.graphql

extend type Query {
  isDrawerOpen: Boolean
}

// Drawer.tsx

import { graphql, LocalQueryRenderer } from 'react-relay';
const Drawer = () => {
  return (
    <LocalQueryRenderer
      environment={environment}
      query={graphql`
        query DrawerQuery {
          isDrawerOpen
        }
      `}
      variables={{}}
      render={({ props }) => {
        return <SomeDrawerImpl isOpen={props.isDrawerOpen} />;
      }}
    />
  );
};

# relay-compiler

ERROR:
Cannot find root 'DrawerQuery'.

Moreover, @hisapy's workaround still works (appending __typename to the query).

      ...
      query={graphql`
        query DrawerQuery {
          __typename
          isDrawerOpen
        }
      `}
      ...