RickNMortyCompose
RickNMortyCompose | graphql-query-example | |
---|---|---|
14 | 1 | |
25 | 6 | |
- | - | |
3.6 | 4.2 | |
over 2 years ago | about 1 year ago | |
Kotlin | TypeScript | |
Apache License 2.0 | - |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
RickNMortyCompose
-
Facing the Monster: An Analgesic for Relayphobia
// /src/relay/environment.ts import { Store, RecordSource, Environment, Network, Observable, } from "relay-runtime"; import type { FetchFunction, IEnvironment } from "relay-runtime"; const fetchFn: FetchFunction = (params, variables) => { const response = fetch("https://rickandmortyapi.com/graphql/", { method: "POST", headers: [["Content-Type", "application/json"]], body: JSON.stringify({ query: params.text, variables, }), }); return Observable.from(response.then((data) => data.json())); }; export function createEnvironment(): IEnvironment { const network = Network.create(fetchFn); const store = new Store(new RecordSource()); return new Environment({ store, network }); }
-
GraphQL Code Generator with TypeScript, React and Apollo Client
import type { CodegenConfig } from '@graphql-codegen/cli'; const config: CodegenConfig = { overwrite: true, schema: "https://rickandmortyapi.com/graphql", documents: './**/*.graphql', generates: { "src/graphql/generated/graphql.ts": { plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'], }, config: { withHooks: true } } }; export default config;
-
How to Write a GraphQL Query
export const apolloClient = new ApolloClient({ uri: "https://rickandmortyapi.com/graphql", cache: new InMemoryCache({ typePolicies: { Query: { fields: { characters: { keyArgs: false, merge(existing: Characters, incoming: Characters) { return { ...incoming, results: [ ...(existing?.results || []), ...(incoming?.results || []), ], } satisfies Characters; }, }, }, }, }, }), });
-
Introducing Goctopus: open-source, state-of-the-art GraphQL endpoint discovery & fingerprinting tool.
goctopus -a rickandmortyapi.com _ __ _ ___ ___| |_ ___ _ __ _ _ ___ / _` |/ _ \ / __| __/ _ \| '_ \| | | / __| | (_| | (_) | (__| || (_) | |_) | |_| \__ \ \__, |\___/ \___|\__\___/| .__/ \__,_|___/ v0.0.14 |___/ |_| [INF] Enumerating subdomains for 'rickandmortyapi.com' [INF] Found 5 subdomains for 'rickandmortyapi.com' in 15 seconds 276 milliseconds INFO[0016] Done fingerprinting rickandmortyapi.com INFO[0016] Found: {"authenticated":false,"domain":"rickandmortyapi.com","schema_status":"OPEN","source":"rickandmortyapi.com","url":"https://rickandmortyapi.com/graphql"} INFO[0016] Done. Found 1 graphql endpoints
-
How to upskill my API Testing.
Checkout https://rickandmortyapi.com and their https://rickandmortyapi.com/graphql
-
A Comprehensive Guide to Writing Your First GraphQL Query
import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client"; Import PeopleData from './PeopleData' function App() { const client = new ApolloClient({ cache: new InMemoryCache(), uri: "https://rickandmortyapi.com/graphql", }); return (
-
Getting started with Postman for GraphQL
Back to business: fortunately, Postman has built-in full support for GraphQL! 🎉Let's take a quick tour of the capabilities by exploring the Rick and Morty API. To get started, create a new HTTP request in Postman. Set the request mode to POST and the URL to https://rickandmortyapi.com/graphql. Now; in the body section, select GraphQL. You should end up with something like this:
-
Making GraphQL Codegen Work For You: GraphQL Integration with React and TypeScript
import "@/styles/globals.css"; import type { AppProps } from "next/app"; import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client"; const client = new ApolloClient({ uri: "https://rickandmortyapi.com/graphql", cache: new InMemoryCache(), }); export default function App({ Component, pageProps }: AppProps) { return ( ApolloProvider> ); }
-
Learn GraphQL and Apollo Client With a Simple React Project
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client' const client = new ApolloClient({ uri: "https://rickandmortyapi.com/graphql", cache: new InMemoryCache(), }) const root = ReactDOM.createRoot(document.getElementById('root')); root.render( );
-
When I export my next.js app as a static build, my dynamic routes fail. Is there a way to alter my code so they work in a static site?
I have a next.js app that uses dynamic routes. Here is the repo on Github https://github.com/ChristianOConnor/graphql-next-api-tester. Run the app by cloning the repo and cd-ing into the root directory, running npm install then npm run dev. It works perfectly. It's a next.js app that does graphql calls to https://rickandmortyapi.com/graphql, and renders them out into a table. You first click on the "List of characters" button in the middle of the home page: [![enter image description here][1]][1]
graphql-query-example
-
How to Write a GraphQL Query
I'll be sharing my tips and tricks along the way, and I hope that this article will be a valuable resource for anyone looking to learn about GraphQL. Feel free to explore the complete codebase in the GitHub repository.
What are some alternatives?
ReactNativeGQL
rick-and-morty-api - The Rick and Morty API
foundation - GraphQL Foundation Charter and Legal Documents
goctopus - Blazing fast GraphQL discovery & fingerprinting toolbox.
react-native - A framework for building native applications using React
subfinder - Fast passive subdomain enumeration tool.
swapi-graphql - A GraphQL schema and server wrapping SWAPI.
next-typescript-graphql-integration - Tutorial for integrating external GQL API with codegen and sending emails with Novu.co
tivi - Tivi is a TV show tracking Android app, which connects to trakt.tv
graphinder - 🕸️ Blazing fast GraphQL endpoints finder using subdomain enumeration, scripts analysis and bruteforce. 🕸️
create-t3-app - The best way to start a full-stack, typesafe Next.js app