@dataql/nextjs

DataQL Next.js SDK with SSR/SSG support and offline-first capabilities.

Features

• 🚀 Next.js Optimized: Built specifically for Next.js with SSR/SSG support
• 🔄 Offline-First: Works seamlessly offline with automatic sync
• ⚡ Server-Side Rendering: Fetch data on the server for better SEO
• 📊 Static Generation: Pre-generate pages with static data
• 🎯 TypeScript: Full TypeScript support with type inference
• 🔧 Easy Setup: Minimal configuration required

Installation

npm install @dataql/nextjs
# or
yarn add @dataql/nextjs

Quick Start

1. Setup DataQL Provider

Wrap your app with the DataQL provider:

// pages/_app.tsx
import { DataQLProvider } from "@dataql/nextjs";

export default function App({ Component, pageProps }) {
  return (
    <DataQLProvider
      config={{
        appToken: "your-app-token",
        databaseName: "my-app-db",
      }}>
      <Component {...pageProps} />
    </DataQLProvider>
  );
}

2. Use DataQL Hooks

// pages/users.tsx
import { useQuery, useMutation } from "@dataql/nextjs";

export default function UsersPage() {
  const { data: users, loading } = useQuery("users");
  const { create } = useMutation();

  const handleCreateUser = async () => {
    await create("users", { name: "John Doe", email: "[email protected]" });
  };

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      <h1>Users</h1>
      <button onClick={handleCreateUser}>Add User</button>
      {users.map((user) => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
}

3. Server-Side Rendering

// pages/posts.tsx
import { GetServerSideProps } from "next";
import { ServerDataQLClient, useServerData } from "@dataql/nextjs";

export default function PostsPage({ initialPosts }) {
  const { data: posts } = useServerData("posts", {}, initialPosts);

  return (
    <div>
      <h1>Posts</h1>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </article>
      ))}
    </div>
  );
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const client = new ServerDataQLClient({
    appToken: process.env.DATAQL_APP_TOKEN,
    serverSide: true,
  });

  const initialPosts = await client.fetchForSSR("posts");

  return {
    props: {
      initialPosts,
    },
  };
};

4. Static Site Generation

// pages/products.tsx
import { GetStaticProps } from "next";
import { ServerDataQLClient, useStaticData } from "@dataql/nextjs";

export default function ProductsPage({ staticProducts }) {
  const { data: products } = useStaticData("products", {}, staticProducts);

  return (
    <div>
      <h1>Products</h1>
      {products.map((product) => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <p>${product.price}</p>
        </div>
      ))}
    </div>
  );
}

export const getStaticProps: GetStaticProps = async () => {
  const client = new ServerDataQLClient({
    appToken: process.env.DATAQL_APP_TOKEN,
    staticGeneration: true,
  });

  const staticProducts = await client.fetchForSSG("products");

  return {
    props: {
      staticProducts,
    },
    revalidate: 60, // Regenerate page every 60 seconds
  };
};

API Reference

Hooks

• useQuery<T>(tableName, filter?) - Query data with offline support
• useLiveQuery<T>(tableName, filter?) - Real-time queries with live updates
• useMutation<T>() - Create, update, delete operations
• useSync() - Sync status and manual sync control
• useServerData<T>(tableName, filter?, initialData?) - SSR data with hydration
• useStaticData<T>(tableName, filter?, staticData?) - SSG data support

Components

• <DataQLProvider> - Context provider for DataQL
• <DataQLWrapper> - Wrapper with SSR/SSG optimizations

Clients

• DataQLNextClient - Main client for Next.js applications
• ServerDataQLClient - Server-side client for SSR/SSG

Utilities

• createNextDataQLConfig() - Create optimized configuration
• getServerSideProps() - Helper for SSR data fetching
• getStaticProps() - Helper for SSG data fetching
• withDataQL() - Higher-order component wrapper

Configuration

const config = {
  appToken: "your-app-token",
  databaseName: "my-app-db",
  enablePersistence: true,
  serverSide: false,
  staticGeneration: false,
  syncConfig: {
    autoSync: true,
    syncInterval: 30000,
  },
  debug: false,
};

License

MIT