graphql-codegen-plugin-typescript-swr

A GraphQL code generator plug-in that automatically generates utility functions for SWR.

Table of Contents

- API Reference
- excludeQueries
- useSWRInfinite
- autogenSWRKey
- Config Example
- Usage Examples
- Pagination
- Authorization
- Next.js

API Reference

$3

type: string | string[] default: ""

Exclude queries that are matched by micromatch (case-sensitive).

$3

type: string | string[] default: ""

Add useSWRInfinite() wrapper for the queries that are matched by micromatch (case-sensitive).

$3

type: boolean default: false

Generate key to use useSWR() automatically.
But, ​the cache may not work unless you separate the variables object into an external file and use it, or use a primitive type for the value of each field.

Config Example

``yaml
generates:
path/to/graphql.ts:
schema: 'schemas/github.graphql'
documents: 'src/services/github/*/.graphql'
plugins:
- typescript
- typescript-operations
# Put plugin-typescript-swr below typescript-graphql-request
- typescript-graphql-request
- plugin-typescript-swr
config:
rawRequest: false
excludeQueries:
- foo*
- bar
useSWRInfinite:
- hoge
- bar{1,3}
autogenSWRKey: true
`

Usage Examples

For the given input:

`graphql
query continents {
continents {
name
countries {
...CountryFields
}
}
}

fragment CountryFields on Country {
name
currency
}
`

It generates SDK you can import and wrap your GraphQLClient instance, and get fully-typed SDK based on your operations:

`tsx
import { GraphQLClient } from 'graphql-request'
import { getSdkWithHooks } from './sdk'

function Continents() {
const client = new GraphQLClient('https://countries.trevorblades.com/')
const sdk = getSdkWithHooks(client)

const { data, error } = sdk.useContinents('Continents')

if (error) return

`yaml
config:
useSWRInfinite:
- MyQuery
`

#### Functional Component

`tsx
const { data, size, setSize } = sdk.useMyQueryInfinite(
'id_for_caching',
(pageIndex, previousPageData) => {
if (previousPageData && !previousPageData.search.pageInfo.hasNextPage)
return null
return [
'after',
previousPageData ? previousPageData.search.pageInfo.endCursor : null,
]
},
variables, // GraphQL Query Variables
config // Configuration of useSWRInfinite
)
`

$3

`typescript
import { GraphQLClient } from 'graphql-request'
import { getSdkWithHooks } from './sdk'
import { getJwt } from './jwt'

const getAuthorizedSdk = () => {
const headers: Record = { 'Content-Type': 'application/json' }
const jwt = getJwt()
if (jwt) {
headers.Authorization = Bearer ${jwt}
}
return getSdkWithHooks(
new GraphQLClient(${process.env.NEXT_PUBLIC_API_URL}, {
headers,
})
)
}

export default getAuthorizedSdk
`

$3

`tsx
// pages/posts/[slug].tsx
import { GetStaticProps, NextPage } from 'next'
import ErrorPage from 'next/error'
import { useRouter } from 'next/router'
import Article from '../components/Article'
import sdk from '../sdk'
import { GetArticleQuery } from '../graphql'

type StaticParams = { slug: string }
type StaticProps = StaticParams & {
initialData: {
articleBySlug: NonNullable
}
}
type ArticlePageProps = StaticProps & { preview?: boolean }

export const getStaticProps: GetStaticProps = async ({
params,
preview = false,
previewData
}) => {
if (!params) {
throw new Error('Parameter is invalid!')
}

const { articleBySlug: article } = await sdk().GetArticle({
slug: params.slug,
})

if (!article) {
throw new Error('Article is not found!')
}

const props: ArticlePageProps = {
slug: params.slug,
preview,
initialData: {
articleBySlug: article
}
}

return {
props: preview
? {
...props,
...previewData,
}
: props,
}
})

export const ArticlePage: NextPage = ({ slug, initialData, preview }) => {
const router = useRouter()
const { data: { article }, mutate: mutateArticle } = sdk().useGetArticle(
GetArticle/${slug}, { slug }, { initialData }
)

if (!router.isFallback && !article) {
return
}

// because of typescript problem
if (!article) {
throw new Error('Article is not found!')
}

return (

<>