Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
nightspirit opened this issue Jun 15, 2018 · 17 comments

Comments

@nightspirit
Copy link
Contributor

@nightspirit nightspirit commented Jun 15, 2018

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

This comment has been minimized.

Copy link

@hisapy hisapy commented Jun 19, 2018

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

This comment has been minimized.

Copy link

@renatobenks-zz renatobenks-zz commented Sep 16, 2018

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

@hisapy

This comment has been minimized.

Copy link

@hisapy hisapy commented Sep 16, 2018

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

@alloy

This comment has been minimized.

Copy link
Collaborator

@alloy alloy commented Sep 17, 2018

@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

This comment has been minimized.

Copy link

@hisapy hisapy commented Sep 17, 2018

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

This comment has been minimized.

Copy link
Contributor Author

@nightspirit nightspirit commented Sep 22, 2018

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

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

@sibelius

This comment has been minimized.

Copy link
Collaborator

@sibelius sibelius commented May 28, 2019

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

This comment has been minimized.

Copy link

@jazblueful jazblueful commented Jul 19, 2019

@sibelius I ran into this bug with v5.0.0

@sibelius

This comment has been minimized.

Copy link
Collaborator

@sibelius sibelius commented Jul 19, 2019

can you provide a sample repro?

@jazblueful

This comment has been minimized.

Copy link

@jazblueful jazblueful commented Jul 20, 2019

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

This comment has been minimized.

Copy link
Collaborator

@sibelius sibelius commented Jul 20, 2019

does your file is called state.js?

where are you using this query?

@jazblueful

This comment has been minimized.

Copy link

@jazblueful jazblueful commented Jul 20, 2019

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

This comment has been minimized.

Copy link

@jazblueful jazblueful commented Jul 20, 2019

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

This comment has been minimized.

Copy link
Collaborator

@sibelius sibelius commented Jul 20, 2019

@jazblueful

This comment has been minimized.

Copy link

@jazblueful jazblueful commented Jul 20, 2019

Ah cool, thanks!

I'll give it a try

@jazblueful

This comment has been minimized.

Copy link

@jazblueful jazblueful commented Jul 20, 2019

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

@enisdenjo

This comment has been minimized.

Copy link

@enisdenjo enisdenjo commented Sep 27, 2019

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
        }
      `}
      ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
7 participants
You can’t perform that action at this time.