@futurelib/graphql-compiler-babel-plugin v0.0.1-alpha.38

graphql-compiler

This is experimental and things might break badly if these packages are used

A prototype GraphQL compiler project for the web

Usage

import React from "react";
import { useFragment, useQuery, Selector } from "@futurelib/graphql-compiler";
import { createQueryLoader } from "@futurelib/graphql-compiler";

import getConfig from "next/config";

const { loadQuery } = createQueryLoader(
  () => getConfig()?.serverRuntimeConfig.GRAPHQL_HOST
);

// Experimental Next.js feature running entirely on the server side
export async function unstable_getServerProps({ req, res, params }) {
  const data = await loadQuery({ id: params.id });

  return {
    props: {
      data
    }
  };
}

function Picture() {
  const data = useFragment(`
    on Picture {
      src
    }
  `);

  return <img src={src} />;
}

function Profile() {
  const data = useFragment(`
    on User {
      name
      picture {
        ${Picture}
      }
    }
  `);

  return (
    <div>
      <h1>{data.name}</h1>
      <Selector path="picture">
        <Picture />
      </Selector>
    </div>
  );
}

function ProfilePage(props) {
  const Provider = useQuery(`
    query($id: ID!) {
      profile(id: $id) {
        ${Profile}
      }
    }
  `);

  return (
    <Provider data={props.data}>
      <Selector path="user">
        <Profile />
      </Selector>

      <PageFooter />
    </Provider>
  );
}

export default ProfilePage;