![Create React App Officially Deprecated Amid React 19 Compatibility Issues](https://cdn.sanity.io/images/cgdhsj6q/production/04fa08cf844d798abc0e1a6391c129363cc7e2ab-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
apollo-datasource-graphql
Advanced tools
Connect your GraphQL server to an existing GraphQL API using DataSources.
Note: This is designed to work with Apollo Server 2.0 and Data Sources
yarn add apollo-datasource-graphql
or
npm i apollo-datasource-graphql --save
Define a data source by extending the GraphQLDataSource
class. You can then implement the queries and mutations that your resolvers require.
import { GraphQLDataSource } from 'apollo-datasource-graphql';
import { gql } from 'apollo-server-express';
const CRAFT_BEERS = gql`
query {
craftBeers {
name
style
abv
brewery {
name
}
}
}
`;
export class CraftBeerGraphQLAPI extends GraphQLDataSource {
baseURL = 'https//craft-beer-api.example/graphql';
async getCraftBeers() {
try {
const response = await this.query(CRAFT_BEERS);
return response.data.craftBeers;
} catch (error) {
console.error(error);
}
}
}
The query
and mutation
methods on the GraphQLDataSource
make a request to the GraphQL server. Both accepts a second parameter, options
, which can be used to pass variables, context, etc.
async searchCraftBeerByName(name) {
try {
const response = await this.query(CRAFT_BEERS, {
variables: {
name,
},
});
return response.data.craftBeer;
} catch (error) {
console.error(error);
}
}
Parameter | Description | Required |
---|---|---|
graphQLDocument | A GraphQL document | true |
options | An object that defines options to pass with the GraphQL request | false |
Options | Description | Required |
---|---|---|
variables | A GraphQL document | false |
operationName | A string name of the query if it is named, otherwise it is null | false |
context | Metadata to be passed between Apollo Links | false |
extensions | A map to store extensions data to be sent to the server | false |
You can intercept the request to set headers on an outgoing request. Since Apollo Data Sources have access to GraphQL context, you can store a user token or other information you need to have available when making a request.
Add the method willSendRequest
to your class which will receive the request
object. Here, you can modify the request to meet your needs.
willSendRequest(request) {
const { accessToken } = this.context;
if (!request.headers) {
request.headers = {};
}
request.headers.authorization = accessToken;
}
FAQs
Create Apollo DataSource to connect to a GraphQL API
We found that apollo-datasource-graphql demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers 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
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.