score:0
i highly recommend using a code generation tool that uses your original schema as the source.
graphql code generator is a package that you can easily incorporate into a react app or similar. once you add it to your project, you can run yarn graphql-codegen init
(assuming you use yarn; there are options for npm, etc.) and it will ask a series of questions to generate a yaml configuration file. you then can add a command like yarn generate
that references that file.
here's an example of the config i created for my project:
overwrite: true
schema: "http://localhost:8080/query"
documents: "./src/**/*.graphql"
generates:
src/generated/graphql.tsx:
plugins:
- "typescript"
- "typescript-operations"
- "typescript-react-query"
./graphql.schema.json:
plugins:
- "introspection"
when you run the yarn generate
command, it fetches your schema from your running back-end service (you'll need to make sure your service has graphql introspection enabled), combines that with your client-side queries, and then generates everything necessary to interact with your service. in my case, i use react-query
, and it creates a per-operation wrapper around usequery
, e.g., usewidgetsquery
. it works great.
i have no affiliation with the project, i'm just a fan.
if you also use code generation on the back end (through another project, depending on your back-end language), it means you can write your schema, etc. once and then generate a huge amount of types and wiring that is easy to keep in sync across projects.
Source: stackoverflow.com
Related Query
- Share GraphQL schema between client and server
- javascript Share code between my client and my server folders
- how to share environment variables between react app and express js server hosting it as static site
- WebSocket connection between reactjs Client and flask-socketio Server doesn't open
- Socket.io connection fails between client and server side (Reacr/Node.js)
- Is it possible to disinguish between server and client in babelrc config (meteor)?
- Websocket 'Sec-WebSocket-Accept' header mismatch between ReactJS client and Node.js server
- I need help understanding how I should use AWS with a GraphQL server and Apollo client
- Connection problems between socket io client and server
- Next.js: Reduce data fetching and share data between pages
- Can we share code between react webapp and react native app and is react-native production ready
- How to fetch data only once in a Next.js app and make it accesible to all the app, both in server and client
- How to coordinate server error messages between Flux and React?
- Is there a cleaner way of getting current URL in both client and server side in isomorphic react apps?
- Render different components on client and server side
- How do I share context between a library component, and my application component?
- Set document title on client and server side
- What is the general practice for express and react based application. Keeping the server and client code in same or different projects/folders?
- What is the difference between server side rendering (Next.js) and Static Site rendering (Gatsby.js)?
- Best solution to share code between 2 separate projects React Js and React Native? ( like redux store)
- How to send file from React/Next.js client UI to Node server and next to Flask service
- Share Component/Logic between React and React-Native
- How to push both the client side and server side project folders together as a one project (api + front end) on github?
- How to share code between node and react?
- Sharing session between React front-end server and PHP/Symfony back-end server
- Get image from server and preview it on client
- What's the best way to deal with an error in the server side and in the client side using nodejs + express
- User Authorization with CASL library share between backend and frontend
- How to run client and server code at the same time
- Querying and Mutating a Form with Apollo Client GraphQL
More Query from same tag
- Add html element inside of react component
- Passing parameters to a react component
- React Js Date Range Picker
- Make view 80% width of parent in React Native
- Cleanup function fails the first time using AbortController
- How to handle localstorage with result of a call to an external API in ReactJS?
- Unable to override Material-UI theme styles
- Does react change the controlled input value even when the state hasn't changed?
- OnClick Event binding in React.js while code is in variable
- Unhandled Rejection (TypeError): Cannot read property 'props' of undefined
- Why gatsby-plugin-manifest cannot resolve 'gatsby'?
- Gatsby + React-pdf
- How to fire multiple API calls asynchronously at the same time?
- How can i map data inside material ui card
- How to scroll to an element using react-spring?
- State is not upating in renderer() component
- Howt to create a shorthand for useDispatch with a specific action inside? Typescript
- React code snippet does not run in repl.it
- JavaScript how to get a length from a map array
- Filter data inside map and return content only if is set to "true"
- make like "is this page useful " by reaction icons react
- react search filter with select option
- How can I call method of a class after binding?
- Pasing objects as component property in React JSX
- Why won't my history.push code for Button onClick handler work?
- How can I move onto the next page after submiting the form in reactJs
- replace characters with asterisk react input
- Local state does not re-render the component when using useLocalStorage
- Prerendering React Components With React Rails
- Next.JS - `.htaccess` file?