react-relay-examples.tsx

/*
# file: Auth.tsx
name query: <File>Query|Mutation
*/

/* Query */

const queryIsAvaliable = graphql`
  query AuthQuery($slug: String!) {
    isRegistered(slug: $slug)
  }
`;
 
const Auth = (slug:string) => {
  return (
      <QueryRenderer
        environment={Environment}
        query={queryIsAvaliable}
        variables={{ slug }}
        render={({ error, props }: any) => {
          if (error) {
            return <div>Error!</div>;
          } else if (!props) {
            return <AuthFallback />;
          } else {
            return <AuthScreen isRegistered={props.isRegistered} />;
          }
        }}
      />
  );
};

/* Mutation */
        

const SaveSlug = () => {
  useEffect(() => {
      commit('google.com');
    }
  }, [isSaving]);
  return (
    <div>
      <div className="box-effect">
        <Loader size="46" message="Salvando..." />
      </div>
    </div>
  );
};

const mutation = graphql`
  mutation AuthMutation($slug: String!) {
    save(slug: $slug) {
      token
    }
  }
`;

const commit = (slug: string) => {
  const variables = { slug };
  commitMutation(environment, {
    mutation,
    variables,
    onCompleted: (response: any, errors: any) => {
      if (errors) {
        // tslint:disable-next-line: no-console
        console.log(errors);
        return <div>Error!</div>;
      } else {
        ...success
      }
    },
    // tslint:disable-next-line: no-console
    onError: (err) => console.error(err),
  });
};