hasura · 0x777 · Jun 8, 2020 · Apr 15, 2020 · Apr 17, 2020 · Apr 29, 2020
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Next release
 
+### Relay
+
+The Hasura GraphQL Engine serves [Relay](https://relay.dev/en/) schema for Postgres tables which has a primary key defined.
+
+The Relay schema can be accessed through `/v1/relay` endpoint.
+
+[Add docs links][add console screenshot for relay toggle]
+
 ### Remote Joins
 
 Remote Joins extend the concept of joining data across tables, to being able to join data across tables and remote schemas.

@@ -10,6 +10,7 @@ const Endpoints = {
   getSchema: `${baseUrl}/v1/query`,
   serverConfig: `${baseUrl}/v1alpha1/config`,
   graphQLUrl: `${baseUrl}/v1/graphql`,
+  relayURL: `${baseUrl}/v1/relay`,
   schemaChange: `${baseUrl}/v1/query`,
   query: `${baseUrl}/v1/query`,
   rawSQL: `${baseUrl}/v1/query`,

@@ -1263,12 +1263,6 @@ code {
   display: block;
   top: 0;
   z-index: 11;
-
-  .stickySeparator {
-    padding-top: 60px;
-    margin-left: -15px;
-    margin-right: -15px;
-  }
 }
 
 .fixed_header_internal_link {

@@ -2,24 +2,21 @@ import React from 'react';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
 import styles from './Tooltip.scss';
-
 const tooltipGen = (message: string) => {
   return <Tooltip id={message}>{message}</Tooltip>;
-};
-
-export interface TooltipProps extends React.ComponentProps<'i'> {
+};export interface TooltipProps extends React.ComponentProps<'i'> {
   message: string;
   placement?: 'right' | 'left' | 'top' | 'bottom';
   className?: string;
 }
-
-const ToolTip: React.FC<TooltipProps> = ({ message, placement = 'right' }) => (
+const ToolTip: React.FC<TooltipProps> = ({ message, placement = 'right', children }) => (
   <OverlayTrigger placement={placement} overlay={tooltipGen(message)}>
-    <i
-      className={`fa fa-question-circle + ${styles.tooltipIcon}`}
-      aria-hidden="true"
-    />
+    {children || (
+      <i
+        className={`fa fa-question-circle ${styles.tooltipIcon}`}
+        aria-hidden="true"
+      />
+    )}
   </OverlayTrigger>
 );
-
-export default ToolTip;
+export default ToolTip;
@@ -6,6 +6,14 @@ import {
 import React from 'react';
 import endpoints from '../../../Endpoints';
 
+export const getGraphQLQueryPayload = (
+  query: string,
+  variables: Record<string, any>
+) => ({
+  query,
+  variables,
+});
+
 export const useIntrospectionSchema = (headers = {}) => {
   const [schema, setSchema] = React.useState<GraphQLSchema | null>(null);
   const [loading, setLoading] = React.useState(true);
@@ -17,7 +25,7 @@ export const useIntrospectionSchema = (headers = {}) => {
     fetch(endpoints.graphQLUrl, {
       method: 'POST',
       headers,
-      body: JSON.stringify({ query: getIntrospectionQuery() }),
+      body: JSON.stringify(getGraphQLQueryPayload(getIntrospectionQuery(), {})),
     })
       .then(r => r.json())
       .then(response => {

@@ -9,7 +9,7 @@ import { WebSocketLink } from 'apollo-link-ws';
 import { parse } from 'graphql';
 import { execute } from 'apollo-link';
 
-import { getHeadersAsJSON } from './utils';
+import { getHeadersAsJSON, getGraphQLEndpoint } from './utils';
 import { saveAppState, clearState } from '../../AppState.js';
 import { ADMIN_SECRET_HEADER_KEY } from '../../../constants';
 
@@ -44,6 +44,18 @@ const CREATE_WEBSOCKET_CLIENT = 'ApiExplorer/CREATE_WEBSOCKET_CLIENT';
 const FOCUS_ROLE_HEADER = 'ApiExplorer/FOCUS_ROLE_HEADER';
 const UNFOCUS_ROLE_HEADER = 'ApiExplorer/UNFOCUS_ROLE_HEADER';
 
+const SET_LOADING = 'ApiExplorer/SET_LOADING';
+export const setLoading = isLoading => ({
+  type: SET_LOADING,
+  data: isLoading,
+});
+
+const SWITCH_GRAPHIQL_MODE = 'ApiExplorer/SWITCH_GRAPHIQL_MODE';
+export const switchGraphiQLMode = mode => ({
+  type: SWITCH_GRAPHIQL_MODE,
+  mode,
+});
+
 const clearHistory = () => {
   return {
     type: CLEAR_HISTORY,
@@ -88,8 +100,9 @@ const getChangedHeaders = (headers, changedHeaderDetails) => {
   return nonEmptyHeaders;
 };
 
-const verifyJWTToken = token => dispatch => {
-  const url = Endpoints.graphQLUrl;
+const verifyJWTToken = token => (dispatch, getState) => {
+  const { mode: graphiqlMode } = getState().apiexplorer;
+  const url = getGraphQLEndpoint(graphiqlMode);
   const body = {
     query: '{ __type(name: "dummy") {name}}',
     variables: null,
@@ -199,10 +212,11 @@ const graphQLFetcherFinal = (graphQLParams, url, headers) => {
 };
 
 /* Analyse Fetcher */
-const analyzeFetcher = (url, headers) => {
+const analyzeFetcher = (headers, mode) => {
   return query => {
     const editedQuery = {
       query,
+      is_relay: mode === 'relay',
     };
 
     const user = {
@@ -227,7 +241,7 @@ const analyzeFetcher = (url, headers) => {
 
     editedQuery.user = user;
 
-    return fetch(`${url}/explain`, {
+    return fetch(`${Endpoints.graphQLUrl}/explain`, {
       method: 'post',
       headers: reqHeaders,
       body: JSON.stringify(editedQuery),
@@ -619,6 +633,16 @@ const apiExplorerReducer = (state = defaultState, action) => {
           },
         },
       };
+    case SWITCH_GRAPHIQL_MODE:
+      return {
+        ...state,
+        mode: action.mode,
+      };
+    case SET_LOADING:
+      return {
+        ...state,
+        loading: action.data,
+      };
     default:
       return state;
   }

@@ -4,6 +4,7 @@ import QueryAnalyzer from './QueryAnalyzer';
 import GraphiQL from 'graphiql';
 import { print, parse } from 'graphql';
 import { isValidGraphQLOperation } from '../utils';
+import { getGraphQLQueryPayload } from '../../../Common/utils/graphqlUtils';
 
 export default class AnalyseButton extends React.Component {
   constructor(props) {
@@ -20,7 +21,7 @@ export default class AnalyseButton extends React.Component {
     };
   }
   render() {
-    const operations = this.props.operations;
+    const { operations, mode } = this.props;
     const optionsOpen = this.state.optionsOpen;
     const hasOptions = operations && operations.length > 1;
 
@@ -67,6 +68,7 @@ export default class AnalyseButton extends React.Component {
         {this.state.analyseQuery && (
           <QueryAnalyzer
             show={this.state.isAnalysing}
+            mode={mode}
             analyseQuery={this.state.analyseQuery}
             clearAnalyse={this.clearAnalyse.bind(this)}
             {...this.props}
@@ -125,15 +127,13 @@ export default class AnalyseButton extends React.Component {
     }
 
     const plainQuery = print(parseQuery);
-    const query = {
-      query: plainQuery,
-      variables: jsonVariables,
-    };
+    const query = getGraphQLQueryPayload(plainQuery, jsonVariables);
     if (operation) {
       query.operationName = operation;
     }
     const analyseQuery = {
       query,
+      is_relay: this.props.mode === 'relay',
     };
     this.setState({
       analyseQuery,

@@ -63,6 +63,8 @@ class ApiExplorer extends Component {
       location,
       serverVersion,
       serverConfig,
+      mode,
+      loading,
     } = this.props;
 
     const styles = require('./ApiExplorer.scss');
@@ -83,12 +85,14 @@ class ApiExplorer extends Component {
             details={displayedApi.details}
             request={displayedApi.request}
             route={route}
+            mode={mode}
             dataHeaders={dataHeaders}
             numberOfTables={tables.length}
             headerFocus={headerFocus}
             urlParams={location.query}
             serverVersion={serverVersion}
             consoleUrl={consoleUrl}
+            loading={loading}
             serverConfig={serverConfig}
           />
         </div>
@@ -105,6 +109,7 @@ ApiExplorer.propTypes = {
   tables: PropTypes.array.isRequired,
   headerFocus: PropTypes.bool.isRequired,
   location: PropTypes.object.isRequired,
+  mode: PropTypes.string.isRequired,
 };
 
 const generatedApiExplorer = connect => {

@@ -827,3 +827,7 @@ label {
     }
   }
 }
+
+.graphiqlModeToggle {
+  float: right;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -827,3 +827,7 @@ label { @@
         }
       }
     }
+    .graphiqlModeToggle {
+      float: right;
+    }