Charlie Swaniawski

Charlie Swaniawski

1651878000

ApolloDeveloperKit: Visual Debugger for Apollo IOS GraphQL Client

ApolloDeveloperKit

Apollo Client Devtools bridge for Apollo iOS.

Overview

ApolloDeveloperKit is an iOS / macOS library which works as a bridge between Apollo iOS client and Apollo Client Developer tools.

This library adds an ability to watch the sent queries or mutations simultaneously, and also has the feature to request arbitrary operations from embedded GraphiQL console.

Screenshots

apollo-developer-kit-animation

Prerequisites

Compatibility

If your are using Apollo < 0.34.0, use ApolloDeveloperKit <= 0.15.0.

Installation

CocoaPods

Add the following lines to your Podfile.

pod 'Apollo'
pod 'ApolloDeveloperKit', '~> 0.15.0', configurations: ['Debug']

Then run pod install.

Carthage

Add the following lines to your Cartfile.

github "apollographql/apollo-ios"
github "manicmaniac/ApolloDeveloperKit"

Then run carthage update --platform iOS --use-xcframeworks or carthage update --platform Mac --use-xcframeworks.

You just need to drag and drop ApolloDeveloperKit.xcframework to your project.

Swift Package Manager

Add https://github.com/manicmaniac/ApolloDeveloperKit to your dependencies.

Since Xcode 12 has only limited support for resources installed via Swift Package Manager, I recommend to use Xcode 12.4 or newer for Swift Package Manager users.

Setup

First, you need to declare a long-lived variable where ApolloDebugServer belongs to, because as soon as you release the server, it stops running.

The following code assumes you already have a procedure that instantiates ApolloClient in AppDelegate.

class AppDelegate: UIResponder, UIApplicationDelegate {
    private var server: ApolloDebugServer!
    private var client: ApolloClient!
}

In order to hook Apollo's cache and network layer, you need to use DebuggableRequestChainNetworkTransport and DebuggableNormalizedCache instead of usual RequestChainNetworkTransport and NormalizedCache.

So the second step is to declare ApolloStore using DebuggableNormalizedCache.

Normally it should be put in the beginning of application, like UIApplication.application(_:didFinishLaunchingWithOptions:).

let cache = DebuggableNormalizedCache(cache: InMemoryNormalizedCache())
let store = ApolloStore(cache: cache)

Third, configure network layer and instantiate ApolloClient with debuggable ingredients.

let interceptorProvider = LegacyInterceptorProvider(store: store)
let networkTransport = DebuggableRequestChainNetworkTransport(interceptorProvider: interceptorProvider, endpointURL: url)
self.client = ApolloClient(networkTransport: networkTransport: store: store)

Finally, create ApolloDebugServer and run.

self.server = ApolloDebugServer(networkTransport: networkTransport, cache: cache)
self.server.start(port: 8081)

See Example/{iOS,macOS}/AppDelegate.swift for full examples.

Usage

If you don't have Apollo Client Developer Tools, install it before proceeding the following steps.

Currently ApolloDeveloperKit supports only version 2.x of Apollo Client Developer Tools.

  1. Launch your app on your device or simulator.
  2. Open your browser and jump to the server's URL (in case your app runs the above example on a simulator, the URL would be http://localhost:8081).
    • You will see ApolloDebugServer is running! on your browser's tab.
    • If not, make sure the server runs and the specified URL is correct.
    • On a real device, the host would be other than localhost but you can check what it is with ApolloDebugServer.serverURL.
  3. Open developer tools.
  4. Select Apollo tab.
    • You will see tabs like GraphiQL, Queries, Mutations on the left pane.
    • If not, reload the tab and wait until it's connected again.

Excluding ApolloDeveloperKit from Release (App Store) Builds

All instructions in this section are written based on Flipboard/FLEX's way.

Since ApolloDeveloperKit is originally designed for debug use only, it should not be exposed to end-users.

Fortunately, it is easy to exclude ApolloDeveloperKit framework from Release builds. The strategies differ depending on how you integrated it in your project, and are described below.

Please make sure your code is properly excluding ApolloDeveloperKit with #if DEBUG statements before starting these instructions. Otherwise it will be linked to your app unexpectedly. See Example/AppDelegate.swift to see how to do it.

For CocoaPods users

CocoaPods automatically excludes ApolloDeveloperKit from release builds if you only specify the Debug configuration for CocoaPods in your Podfile.

For Carthage users

  1. Do NOT add ApolloDeveloperKit.framework to the embedded binaries of your target, as it would otherwise be included in all builds (therefore also in release ones).
  2. Instead, add $(PROJECT_DIR)/Carthage/Build/iOS or $(PROJECT_DIR)/Carthage/Build/Mac to your target Framework Search Paths (this setting might already be present if you already included other frameworks with Carthage). This makes it possible to import the ApolloDeveloperKit framework from your source files. It does not harm if this setting is added for all configurations, but it should at least be added for the debug one.
  3. Add a Run Script Phase to your target (inserting it alter the existing Link Binary with Libraries phase, for example), and which will embed ApolloDeveloperKit.framework in debug builds only:
if [ "$CONFIGURATION" = Debug ]; then
  /usr/local/bin/carthage copy-frameworks
fi

Finally, add $(SRCROOT)/Carthage/Build/iOS/ApolloDeveloperKit.framework or $(SRCROOT)/Carthage/Build/Mac/ApolloDeveloperKit.framework as input file of this script phase.

For users those who copy all the source files to the project manually

Now there's no easy way but you can exclude ApolloDeveloperKit by setting user defined build variable named EXCLUDED_SOURCE_FILE_NAMES. The value for the variable is a space-separated list of each filenames in ApolloDeveloperKit. Sorry for the inconvenience.

Console Redirection

ApolloDeveloperKit supports console redirection. When it is enabled, all logs written in stdout (usually written with print()) and stderr (written with NSLog()) are redirected to the web browser's console as well.

This feature is disabled by default so you may want to enable it explicitly.

debugServer = ApolloDebugServer(networkTransport: networkTransport, cache: cache)
debugServer.enableConsoleRedirection = true

Then open the console in your browser's developer tools. You will see logs in your iPhone or simulator.

In the browser console, logs written in stdout are colored in blue-green and stderr are orange so that you can distinguish them from ordinary browser logs.

console-redirection.png

Development

API Documentation

Auto-generated API documentation is here.

Run Example App

Since Example app is slightly modified version of apollographql/frontpage-ios-app, you need to start apollographql/frontpage-server before running the app.

  1. Open Xcode and select ApolloDeveloperKitExample scheme.
  2. Run and open http://localhost:8081 in your browser.

Author: manicmaniac
Source Code: https://github.com/manicmaniac/ApolloDeveloperKit
License: MIT License

#apollo #graphql 

What is GEEK

Buddha Community

ApolloDeveloperKit: Visual Debugger for Apollo IOS GraphQL Client
Charlie Swaniawski

Charlie Swaniawski

1651878000

ApolloDeveloperKit: Visual Debugger for Apollo IOS GraphQL Client

ApolloDeveloperKit

Apollo Client Devtools bridge for Apollo iOS.

Overview

ApolloDeveloperKit is an iOS / macOS library which works as a bridge between Apollo iOS client and Apollo Client Developer tools.

This library adds an ability to watch the sent queries or mutations simultaneously, and also has the feature to request arbitrary operations from embedded GraphiQL console.

Screenshots

apollo-developer-kit-animation

Prerequisites

Compatibility

If your are using Apollo < 0.34.0, use ApolloDeveloperKit <= 0.15.0.

Installation

CocoaPods

Add the following lines to your Podfile.

pod 'Apollo'
pod 'ApolloDeveloperKit', '~> 0.15.0', configurations: ['Debug']

Then run pod install.

Carthage

Add the following lines to your Cartfile.

github "apollographql/apollo-ios"
github "manicmaniac/ApolloDeveloperKit"

Then run carthage update --platform iOS --use-xcframeworks or carthage update --platform Mac --use-xcframeworks.

You just need to drag and drop ApolloDeveloperKit.xcframework to your project.

Swift Package Manager

Add https://github.com/manicmaniac/ApolloDeveloperKit to your dependencies.

Since Xcode 12 has only limited support for resources installed via Swift Package Manager, I recommend to use Xcode 12.4 or newer for Swift Package Manager users.

Setup

First, you need to declare a long-lived variable where ApolloDebugServer belongs to, because as soon as you release the server, it stops running.

The following code assumes you already have a procedure that instantiates ApolloClient in AppDelegate.

class AppDelegate: UIResponder, UIApplicationDelegate {
    private var server: ApolloDebugServer!
    private var client: ApolloClient!
}

In order to hook Apollo's cache and network layer, you need to use DebuggableRequestChainNetworkTransport and DebuggableNormalizedCache instead of usual RequestChainNetworkTransport and NormalizedCache.

So the second step is to declare ApolloStore using DebuggableNormalizedCache.

Normally it should be put in the beginning of application, like UIApplication.application(_:didFinishLaunchingWithOptions:).

let cache = DebuggableNormalizedCache(cache: InMemoryNormalizedCache())
let store = ApolloStore(cache: cache)

Third, configure network layer and instantiate ApolloClient with debuggable ingredients.

let interceptorProvider = LegacyInterceptorProvider(store: store)
let networkTransport = DebuggableRequestChainNetworkTransport(interceptorProvider: interceptorProvider, endpointURL: url)
self.client = ApolloClient(networkTransport: networkTransport: store: store)

Finally, create ApolloDebugServer and run.

self.server = ApolloDebugServer(networkTransport: networkTransport, cache: cache)
self.server.start(port: 8081)

See Example/{iOS,macOS}/AppDelegate.swift for full examples.

Usage

If you don't have Apollo Client Developer Tools, install it before proceeding the following steps.

Currently ApolloDeveloperKit supports only version 2.x of Apollo Client Developer Tools.

  1. Launch your app on your device or simulator.
  2. Open your browser and jump to the server's URL (in case your app runs the above example on a simulator, the URL would be http://localhost:8081).
    • You will see ApolloDebugServer is running! on your browser's tab.
    • If not, make sure the server runs and the specified URL is correct.
    • On a real device, the host would be other than localhost but you can check what it is with ApolloDebugServer.serverURL.
  3. Open developer tools.
  4. Select Apollo tab.
    • You will see tabs like GraphiQL, Queries, Mutations on the left pane.
    • If not, reload the tab and wait until it's connected again.

Excluding ApolloDeveloperKit from Release (App Store) Builds

All instructions in this section are written based on Flipboard/FLEX's way.

Since ApolloDeveloperKit is originally designed for debug use only, it should not be exposed to end-users.

Fortunately, it is easy to exclude ApolloDeveloperKit framework from Release builds. The strategies differ depending on how you integrated it in your project, and are described below.

Please make sure your code is properly excluding ApolloDeveloperKit with #if DEBUG statements before starting these instructions. Otherwise it will be linked to your app unexpectedly. See Example/AppDelegate.swift to see how to do it.

For CocoaPods users

CocoaPods automatically excludes ApolloDeveloperKit from release builds if you only specify the Debug configuration for CocoaPods in your Podfile.

For Carthage users

  1. Do NOT add ApolloDeveloperKit.framework to the embedded binaries of your target, as it would otherwise be included in all builds (therefore also in release ones).
  2. Instead, add $(PROJECT_DIR)/Carthage/Build/iOS or $(PROJECT_DIR)/Carthage/Build/Mac to your target Framework Search Paths (this setting might already be present if you already included other frameworks with Carthage). This makes it possible to import the ApolloDeveloperKit framework from your source files. It does not harm if this setting is added for all configurations, but it should at least be added for the debug one.
  3. Add a Run Script Phase to your target (inserting it alter the existing Link Binary with Libraries phase, for example), and which will embed ApolloDeveloperKit.framework in debug builds only:
if [ "$CONFIGURATION" = Debug ]; then
  /usr/local/bin/carthage copy-frameworks
fi

Finally, add $(SRCROOT)/Carthage/Build/iOS/ApolloDeveloperKit.framework or $(SRCROOT)/Carthage/Build/Mac/ApolloDeveloperKit.framework as input file of this script phase.

For users those who copy all the source files to the project manually

Now there's no easy way but you can exclude ApolloDeveloperKit by setting user defined build variable named EXCLUDED_SOURCE_FILE_NAMES. The value for the variable is a space-separated list of each filenames in ApolloDeveloperKit. Sorry for the inconvenience.

Console Redirection

ApolloDeveloperKit supports console redirection. When it is enabled, all logs written in stdout (usually written with print()) and stderr (written with NSLog()) are redirected to the web browser's console as well.

This feature is disabled by default so you may want to enable it explicitly.

debugServer = ApolloDebugServer(networkTransport: networkTransport, cache: cache)
debugServer.enableConsoleRedirection = true

Then open the console in your browser's developer tools. You will see logs in your iPhone or simulator.

In the browser console, logs written in stdout are colored in blue-green and stderr are orange so that you can distinguish them from ordinary browser logs.

console-redirection.png

Development

API Documentation

Auto-generated API documentation is here.

Run Example App

Since Example app is slightly modified version of apollographql/frontpage-ios-app, you need to start apollographql/frontpage-server before running the app.

  1. Open Xcode and select ApolloDeveloperKitExample scheme.
  2. Run and open http://localhost:8081 in your browser.

Author: manicmaniac
Source Code: https://github.com/manicmaniac/ApolloDeveloperKit
License: MIT License

#apollo #graphql 

WebClues Infotech

WebClues Infotech

1626088193

iOS App Development Company in Singapore

iOS app development in Singapore

iOS has become the first priority for most smartphone users because of the security it offers compares to the Android operating system. Due to this reason, it is suggested to launch an app in iOS before other platforms.

Want to develop an iOS app in Singapore?

WebClues Infotech with its worldwide reach has already offered its iOS app development services to customers in Singapore. With a highly-skilled development team of 120+ members, WebClues Infotech has got the required resources an agency needs to fulfil client requirements around the world.

Want to know more about our iOS app development services in Singapore?

Visit: https://www.webcluesinfotech.com/iphone-app-development/

Share your requirements https://www.webcluesinfotech.com/contact-us/

View Portfolio https://www.webcluesinfotech.com/portfolio/

#ios app development in singapore #ios app development company #ios app development #ios #ios app #hire ios developer

Lawrence Lesch

Lawrence Lesch

1622720280

Apollo Client Data Normalization and Storage

Apollo client is a powerful frontend GraphQL library that allows an application using GraphQL to query itself, and the connected GraphQL data service. It is a client side state management library that integrates deeply with GraphQL backends.

Under the covers, Apollo client takes your GraphQL query response, and flattens it into a key-value storage system. Take the following example:

// GraphQL Query and Type
type Account { 
  id: ID!
  userName: String!
}
query getAccount() {
  account {
    id
    userName
    __typename // not required, but for illustration
  }  
}

The query above for a value on type Account, would return a response like this:

{
  data: {
    account: {
      id: 1,
      userName: 'user',
      __typename: 'Account'
    }
  }
}

#apollo #graphql #apollo-client #javascript #react

WebClues Infotech

WebClues Infotech

1626088709

iOS App Development in the United Arab Emirates

iOS App Development in the United Arab Emirates

Developed and Developing nations have seen a rapid rise in the demand for iOS app development and the United Arab Emirates is no exception. The use of on-demand apps has increased drastically in the last decade and business is leveraging this demand with launching iOS mobile apps.

Want to develop the iOS app in the United Arab Emirates?

WebClues Infotech after serving multiple clients in UAE has become well aware of the people’s needs in the region. With a highly experienced development team that has completed more than 950+ projects, we are prepared to serve you with your iOS app development needs.

Want to know more about our iOS App Development Services in UAE?

Visit: https://www.webcluesinfotech.com/iphone-app-development/

Share your requirements https://www.webcluesinfotech.com/contact-us/

View Portfolio https://www.webcluesinfotech.com/portfolio/

#ios app development in the united arab emirates #ios app development #ios app #ios #ios app development company #hire ios developer

Sadie Cassin

Sadie Cassin

1616571282

Apollo Client vs. Redux: Learnings and Experience

The ever changing world of front end development continues to evolve and introduce many different libraries to solve your problems. As GraphQL continues to grow in popularity, the tools and libraries surrounding it change also. Recently I helped write a new application that interacted solely with a GraphQL backend, and used Apollo Client (AC) to interact with instead of Redux in our React frontend application. Having previously written many javascript apps with Redux, here are some takeaways from my experience.

Disclaimer: Comparing the two libraries assumes you are working with a GraphQL backend. Apollo Client doesn’t work with other types of backends and isn’t a viable alternative to Redux in that case.

#graphql #redux #apollo-client #javascript #apollo