Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
react-query-gql
Advanced tools
Generate apollo code for nextjs ssr
Nextjs recently introduced getServerSideProps
which doesn't allow to use the HOC pattern adopted by the official apollo graphql plugin (based on getInitialProps
). At the same time the SSR method offered by apollo client (getDataFromTree
) enforces the react app to render multiple times in order to collect and fetch all the relevant queries.
By declaring a top level query we can save rendering time and provide a simpler pattern which works with getServerSideProps
. This plugin generates a typesafe version of getServerSideProps
for each server query, and the corresponding HOC to wrap the react component returning the cache result. The limitation/advantage of this solution is that all the queries embedded into inner react components are ignored, unless covered by the top level cache.
excludePatterns
(default: null): regexp to exclude operation namesexcludePatternsOptions
(default: ''): regexp flags to exclude operation namesreactApolloVersion
(default: 2): apollo client versionapolloCacheImportFrom
(default: apollo-cache-inmemory): apollo-cache-inmemory dependencyapolloImportFrom
(default: apollo-client v2 or @apollo/client v3): apollo client dependencyapolloCacheImportFrom
(default: apollo-cache-inmemory v2 or @apollo/client v3): apollo cache client dependencyapolloStateKey
(default: apolloState): Key used for storing Apollo statewithHooks
(default: false): Customized the output by enabling/disabling the generated React Hooks.withHOC
(default: true): Customized the output by enabling/disabling the HOC.customImports
(default: ''): full custom import declarationpre
(default: ''): custom code before each functionpost
(default: ''): custom code after each functionapolloClientInstanceImport
(default: ''): Add apolloClient instance importsreplaceQuery
(default: false): Replace "query" keyword inside the generated operationsreplacePage
(default: false): Replace "page" keyword inside the generated operationsreactImport
(default: import type React from 'react';): custom react importoverwrite: true
schema:
- 'https://myschema/graphql'
documents:
- 'src/**/*.graphql'
generates:
src/@types/codegen/graphql.tsx:
plugins:
- 'typescript'
- 'typescript-operations'
- 'typescript-react-apollo'
src/@types/codegen/page.tsx:
config:
documentMode: external
importDocumentNodeExternallyFrom: ./graphql
preset: import-types
presetConfig:
typesPath: ./graphql
plugins:
- ./build/src/index.js
hooks:
afterAllFileWrite:
- prettier --write
FAQs
React Query Gql Client
The npm package react-query-gql receives a total of 4 weekly downloads. As such, react-query-gql popularity was classified as not popular.
We found that react-query-gql demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.