usulpro

* [_type == "post"] {
 ...,
  author->
}

usulpro

usulpro

import { addDecorator } from '@storybook/react';
import { withGraphCMS } from '@focusreactive/storybook-addon-graphcms';

addDecorator(withGraphCMS({ endpoint: CMS_ENDPOINT, token: CMS_TOKEN, projectId: 'YOUR_PROJECT_ID', stage: 'master' }))

usulpro

import { addDecorator } from '@storybook/react';
import { withGraphQL } from '@focusreactive/storybook-graphql-kit';

addDecorator(withGraphQL({ endpoint: CMS_ENDPOINT, token: CMS_TOKEN }));

usulpro

yarn add --dev @focusreactive/storybook-graphql-kit

usulpro

// speakers.stories.js

import { QueryParams } from '@focusreactive/storybook-graphql-kit';
import { speakersQuery } from '../speaker.query';


export const speakers = ({ graphQlResponse: { result } }) => result.map(({ name, bio }) => (<div><h2>{name}</h2><p>{bio}</p></div>));

speakers.story = {
  name: 'Conference Speakers',

usulpro

// speakers.stories.js

import { QueryParams } from '@focusreactive/storybook-graphql-kit';
import { speakersQuery } from '../speaker.query';


export const speakers = Query({
  name: 'Conference Speakers',
  story: ({ graphQlResponse: { result } }) => result.map(({ name, bio }) => (<div><h2>{name}</h2><p>{bio}</p></div>)),
  query,

usulpro

// speakers.stories.js

import { Query } from '@focusreactive/storybook-graphql-kit';
import { speakersQuery } from '../speaker.query';


export const speakers = Query({
  name: 'Conference Speakers',
  query,
  vars: { conferenceTitle: 'React_Day_Berlin', eventYear: 'Y2019' },

usulpro

// speakers.stories.js

import { Query } from '@focusreactive/storybook-graphql-kit';
import { speakersQuery } from '../speaker.query';

export const speakers = Query({
  name: 'Conference Speakers',
  speakersQuery,
  vars: { conferenceTitle: 'React_Day_Berlin', eventYear: 'Y2019' },
  searchVars: { name: '' },

usulpro

// speakers.query.js

export const speakersQuery = /* GraphQL */ `
  query($conferenceTitle: ConferenceTitle, $eventYear: EventYear, $name: String) {
    result: speakers(
      where: {
        conferenceEvents_some: { year: $eventYear, conferenceBrand: { title: $conferenceTitle } }
        name_contains: $name
      }
    ) {