How to use @graffy/fill - 5 common examples

import { dirname } from 'path';
import { fileURLToPath } from 'url';
import express from 'express';

import Graffy from '@graffy/core';
import GraffyFill from '@graffy/fill';
// import GraffyCache from '@graffy/cache';
import GraffyServer from '@graffy/server';
import mock from './mockVisitorList';

const __dirname = dirname(fileURLToPath(import.meta.url));

const g = new Graffy();
g.use(GraffyFill());
g.use(mock);

const app = express();
app.use('/api', GraffyServer(g));
app.use(express.static(__dirname + '/public'));
app.listen(8443);

// eslint-disable-next-line no-console
console.log('Server started at 8443');

import '@babel/polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import Graffy from '@graffy/core';
import GraffyFill from '@graffy/fill';
import GraffyClient from '@graffy/client';
// import mock from './mockVisitorList';
import { GraffyProvider } from '@graffy/react';

import App from './components/App';
// import './index.css';

const store = new Graffy();
store.use(GraffyFill());
// store.use(mock);
store.use(GraffyClient('/api'));

ReactDOM.render(
  
    
  ,
  document.getElementById('root'),
);

import '@babel/polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import Graffy from '@graffy/core';
import GraffyFill from '@graffy/fill';
import GraffyClient from '@graffy/client';
// import mock from './mockVisitorList';
import { GraffyProvider } from '@graffy/react';

import App from './components/App';
// import './index.css';

const store = new Graffy();
store.use(GraffyFill());
// store.use(mock);
store.use(GraffyClient('/api'));

ReactDOM.render(
  
    
  ,
  document.getElementById('root'),
);

import React, { useState } from 'react';
import Graffy from '@graffy/core';
import GraffyFill from '@graffy/fill';
import { GraffyProvider } from '@graffy/react';

import Source, { provider } from './Source';
import Query from './Query';
import Result from './Result';

const store = new Graffy();
store.use(GraffyFill());
store.use(provider);

export default function Demo() {
  const [query, setQuery] = useState({
    players: [{ first: 2 }, { name: true, score: true }],
  });

  const [expanded, setExpanded] = useState('result');
  const paneProps = name => ({
    ...(expanded === name ? { 'data-expanded': 'true' } : {}),
    tabIndex: 0,
    onFocus: () => setExpanded(name),
    onBlur: () => setExpanded('result'),
  });

  return (

export default function(options) {
  const store = new Graffy();
  store.use(Fill(options));
  store.use(Cache(options));
  return store;
}